James Mitchell
James Mitchell

Reputation: 2467

How to add a grain type look to background-color

Notice the blue sidebar has a grain effect added to it.

How to I achieve this without using an image?

enter image description here

Upvotes: 2

Views: 6908

Answers (1)

paddy
paddy

Reputation: 63471

You can create a textured image with only a few colours to achieve a grain effect. As a GIF or similar, it will only amount to a few hundred bytes if you do it right. That is, make a small image and tile it.

If you want to find out how a specific site achieved that effect, use a DOM inspector to check the code behind the element. Chrome has this functionality built-in if you right click and choose "Inspect Element". I bet you'll find there's a background image.

Upvotes: 1

Related Questions