How to Create Noise Texture Backgrounds in Inkscape

Noise, grain, bumps, and static textures have all been said before for what we’re about to create in Inkscape. Noise textures are a subtle overlay image that you can use for website backgrounds to add a little character.

The Final Result

Step 1

Get Inkscape opened up and set the document size to 200px by 200px. Then simply use the Rectangle tool to create a 200px by 200px square. Make sure that there’s no Stroke and that the Fill is black, but with a 150 Alpha.

Step 2

Select your square and then head up to Filters > Overlays > Noise Fill. A menu will pop up with a bunch of noise settings, but you can just set them like I have it below (or make your own, you know, whatever you want and all that).

Step 3

Since we’ll be using this noise as an overlay, go to the Noise color tab and turn the Alpha all the way down to zero. Now just hit Apply when you’re done.

Step 4

You should end up with something like this. You’re all done at this point and can head up to File > Export PNG Image.

Step 5

If you were to use this for a noise texture website background, you could add your static PNG (I called mine bumps.png) as a background image and then assign a background color. Here’s my CSS:

1

2

3

4

5

body

{

background-image:url('bumps.png');

background-color:purple;/*oranyothercolorintheworld*/

}

Which gives this final result:

Step 6

You can also do neat stuff with a simple image like this:

That’s All!

As you can see, it’s very easy to create a static texture background for your website using Inkscape’s Noise Fill feature. You can play around with the settings if you’d like, but I found these to work the best with almost every color imaginable. Thanks for reading!