Unlimited WordPress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
  1. Web Design
  2. SVG

Make Your Web Images More Realistic With SVG Grainy Filters (Noise)

Read Time: 2 mins

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!


Did you find this post useful?
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.