In this video tutorial you’ll learn how to create some SVG grainy filters (noise) and use them to make images more realistic on the web.
Make Some Noise!
Let’s talk a little bit about noise. In design and illustration it can be used to add texture and depth to an otherwise solid color or smooth gradient.
For example, take a look at these beautiful illustrations by Brad Hansen. See how much depth is added to the composition by adding some grainy noise? This effect is relatively easy to achieve in design software like Photoshop, Illustrator, Figma, Adobe XD and so on, but what about CSS?
Happily, a CSS background noise effect is totally achievable thanks to grainy SVG filters. Check out this demo of an SVG image, with a noise filter added for extra atmosphere:
So if you don’t want your images to look as smooth as a baby’s bottom let me show you how to add some texture to them with a little bit of code.
CSS Fan? Check Out These Videos!
If we haven’t met before my name’s Adi and I’m a web designer. It’s my goal with these videos to help you become a better web designer and developer!
Exploring Creative CSS Hover Effects for Inline Links
CSS Grid vs. Flexbox: Which Should You Use and When?
Quick tip: How to Make Elements Resizable with CSS Resize
Better Focus Styles with CSS Pseudo-Class :focus-visible
Resources
- Noisy Gradients Basics
- Noisy Gradients Mesh - Method 1
- Noisy Gradients Mesh - Method 2
- Noisy Gradients Image
- CSS mesh gradients generator: Mesher Tool by CSS Hero
- mix-blend-mode - CSS: Cascading Style Sheets | MDN
- Dither / Dissolve CSS Gradients
- Howling Wolves - Landscape Illustration by Zomorsky on Envato Elements
- - SVG: Scalable Vector Graphics | MDN
- Grainy Gradients playground
- CSS Filter Effects | Can I use... Support tables for HTML5, CSS3, etc
- CSS property: mix-blend-mode | Can I use... Support tables for HTML5, CSS3, etc
- Blending of HTML/SVG elements | Can I use... Support tables for HTML5, CSS3, etc
