GoKawiilIf you want to be kept up to date with new articles, CSS resources and tools, join our newsletter.
CSS is getting a random() function that lets you set properties with a random value, letting you make interesting and creative new designs. It's available in Polypane 29+ for testing, as well as in Chromium 148+ with experimental features enabled.
Safari 26.2+ also support random() , but doesn't fully support all the demos I show in this article. Firefox currently has no support for random() .
Use Polypane 29+, Safari 26.2 or Chromium 148+ with experimental features enabled to try out the demos in this article. If you want to see the demos in action, you can get Polypane and try it for free.
I made some demos
I spend a few weeks coming up with different examples of how to use random() to create interesting designs, patterns and backgrounds.
A note on the code examples
We're using random() directly in the code examples below, and don't have a fallback for browsers that don't support it yet. If you want to see the examples in action, you can get Polypane and try it for free.
The code examples have fully editable CSS, but only show the relevant CSS for each effect (for example the bokeh below does show the positioning, but not the border-radius ).
You can edit the CSS in the examples to see how it works. In the code example we only show the most relevant CSS, but if you copy the code you'll get the full HTML and CSS for the example. Click the 'randomize' button to reload the example with a new random value for each property.
... continue reading