Grainy Gradients

By layering a noisy SVG background and a gradient on top of each other, in combination with a filter that increases the contrast, Jimmy Chion creates these wonderful “Grainy Gradients”.

See the Pen
Grainy Gradient, step 3
by Jimmy Chion (@cjimmy)
on CodePen.

Over at CSS-Tricks he lays out the details:

In this article, we’ll generate colorful noise to add texture to a gradient with only a small amount of CSS and SVG. Alright, let’s make some noise!

He also built a playground to easily create your own Grainy Gradients.

Grainy Gradient Playground →
Grainy Gradients (Article)

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.