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 :).