CSS3 Gradients and Textures

Feb 08, 2012

CSS3 has opened the door for a styling elements in a whole new way. It is now possible to get dramatic and detailed effects and styles with very simple CSS, where previously it would only possibly to get the same effect through a combination of images hacked together.

For a recent project I wanted to create an element that had a textured background and a gradient like in the picture above. Before CSS3 I would have had to use a combination of images to get the rounded corners and the subtle gradient. For this tutorial, the only image you will need is the White Leather texture from Subtle Patterns.

Here’s how to do it!

First bootstrap yourself the element you want to style.

<div id="box"></div>

Next add the CSS to quickly give the element a size and round the corners.

#box {
  width: 480px;
  height: 255px;
  border-radius: 20px;
}

Next we need to add the gradient and the texture. With CSS3 you can have RGBA colours that you can control the opacity. This allows you to have a colour that shows through a background image.

I’m not going to go into the detailed syntax of how the next bit of CSS3 works because you don’t really need to understand that to get this working. Basically you need to specify the colours that make up the gradient and then specify the image that you want to show through.

Here’s the CSS I used in the above example;

background-color: #ededed;
background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, rgba(237, 237, 237, 0.5)),
    color-stop(100%, rgba(153, 153, 153, 0.5))
  ),
  url(white_leather.png);
background-image: -webkit-linear-gradient(
    top,
    rgba(237, 237, 237, 0.5),
    rgba(153, 153, 153, 0.5)
  ),
  url(white_leather.png);
background-image: -moz-linear-gradient(
    top,
    rgba(237, 237, 237, 0.5),
    rgba(153, 153, 153, 0.5)
  ),
  url(white_leather.png);
background-image: -ms-linear-gradient(
    top,
    rgba(237, 237, 237, 0.5),
    rgba(153, 153, 153, 0.5)
  ),
  url(white_leather.png);
background-image: -o-linear-gradient(
    top,
    rgba(237, 237, 237, 0.5),
    rgba(153, 153, 153, 0.5)
  ),
  url(white_leather.png);
background-image: linear-gradient(
    top,
    rgba(237, 237, 237, 0.5),
    rgba(153, 153, 153, 0.5)
  ),
  url(white_leather.png);

The bits you need to change are where it says rgba(237,237,237, 0.5) for the colours and url(white_leather.png) for the path to your image.

To edit the colours, first type the three RGBA colour values and then type a decimal for the level of opacity.

For example, the following would be the colour black at a very low opacity (so you would be able to see a lot of the background image)

rgba(0,0,0, 0.1);

Whilst this would be the colour white with a very high opacity (so you wouldn’t be able to see much of the background image)

rgba(255,255,255, 0.9);

And it’s really that simple. This technique can be used with a combination of textured repeating backgrounds and gradients on a variety of User Interface elements to get a warm and inviting feel.

If you use this in any of your projects, feel free to leave a comment so I can take a look!