Articles Tagged patterns

You can create stripes in CSS. That’s all I thought about in terms of CSS background patterns for a long time. There’s nothing wrong with stripes; stripes are cool. They can be customized into wide and narrow bands, criss-crossed into a checked pattern, and played with in other ways using the idea of hard stops. But stripes can be boring, too. Too conventional, out of fashion, and sometimes even unpleasant.

Thankfully, we can conjure up far more background … Read article “Creative Background Patterns Using Gradients, CSS Shapes, and Even Emojis”

For those who have missed the big news, Firefox now supports conic gradients!

Starting with Firefox 75, released on the April 7, we can go to about:config, look for the layout.css.conic-gradient.enabled flag and set its value to true (it’s false by default and all it takes to switch is double-clicking it).

Enabling conic gradients in Firefox 75+

With that enabled, now we can test our CSS including conic gradients in Firefox as well.… Read article “Background Patterns, Simplified by Conic Gradients”

Creating is the most intense excitement one can come to know.

—Anni Albers, On Designing

I recently wrote a post — that was shared here on CSS-Tricks — where I looked at ways to use Unicode characters to create interesting (and random) patterns. Since then, I’ve continued to seek new characters to build new patterns. I even borrowed a book about Unicode from a local library.

(That’s a really thick book, by the way.)

It’s all up to … Read article “More Unicode Patterns”

These aren’t particularly hard to web search for, but just in case you didn’t know they existed I figured I’d drop them here. I’ve used all three of these in the past and I think they do a good job of driving home how cool of patterns you can make in SVG with such little code.… Read article “Websites to Generate SVG Patterns”