logoBrett Rawlins

CSS background patterns

May 31, 2013

CSS is getting more and more awesome all the time. The other day I discovered that you can create background patterns using the repeating-linear-gradient property. Lea Verou has a great article that explains how it works. She's created some amazing patterns in her CSS3 Patterns Gallery to demonstrate the power of this tool.

Here's my humble implementation. The marketing department wanted a link to building construction updates that looked like caution tape:

background: repeating-linear-gradient(135deg, #ebd007, #ebd007 30px, #555 30px, #555 60px);

I know it's not pretty... it's caution tape. But the point is you can create cool patterns without having to use images :).