Gradients in CSS

Ten years ago it was quite common to see gradients and reflections on the web. This was all pre-made in an image editor or done with CSS-repeating images, but today it’s possible to achieve the same result using CSS3. Unfortunately it’s currently only supported by WebKit, so you will need a browser such as latest Chrome or Safari to view the effect.

If you plan to use this anywhere, remember the progressive enhancement principle since it will only work in a small subset of available browsers.

The basic usage is:

The first two are quite obvious. Direction is above/below/left/right and offset is the distance between the image and the reflection. But the mask is a bit more interesting. The most common use is a webkit-gradient, another proprietary property. The basic usage is:

It’s easier than it looks. Type is is either linear or radial, point is a pair of values (numbers, percentages or keywords). Radius is used for radial gradients and the rest is starting/stopping point and from/to color – better understood with an example:

If we apply this style to an element it will look like this:

The gradient is linear and goes from top left to right bottom, where the color goes from white to black. It is also possible to use color-stop in the middle:

Which will render a nice bar:

Let’s apply a gradient mask to the reflection:

It is perfectly valid to use an image as mask, if you could find any practical use for such a thing. And even HTML5 video!

In short, it may not be the most useful thing in the world, but it’s nice to get rid of any superfluous images to reduce loading page loading time and the number of HTTP requests.