1. Web Design
  3. SVG

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

Scroll to top
Read Time: 2 min

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?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.