Mink Machine

CSS3 Reflect and Gradients

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 without images 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:

-webkit-box-reflect: <direction> <offset> <mask-box-image>

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:

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

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:

-webkit-gradient(linear, left top, right bottom, from(white), to(black))

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

Gradient example.

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:

-webkit-gradient(linear, center top, center bottom, from(gray), color-stop(50%, white), to(gray))

Which will render a nice bar:

Gradient example with color-stop.

Let’s apply a gradient mask to the reflection:

-webkit-box-reflect:below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30%, transparent), to(white)

Here is the result:

Mongolia

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

The technique can also be applied to all elements, such as a form (try typing in the input box!):

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.

[2009]

Featured stories

Wazzup in Vaduz

Wazzup in Vaduz

"Vaduz Castle is overlooking the town from a hill, a short walk from the center. It’s really a postcard view with the alps in the background, which I’m sure the prince enjoys as he sips his morning coffee while towering above his loyal subjects."
Roaming in Valletta

Roaming in Valletta

"I passed the statue of Jean de Valette, the 49th Grand Master who laid the foundation stone to Valletta in 1566, to gaze at the golden interior of St. John’s Co-Cathedral, where he is buried in the crypt."
Chilling in Chile

Chilling in Chile

"My weary feet has reached Valparaiso. After almost a month of traveling across the South American continent I realize that this is as far south as I will come, due to weather conditions."
The sound of Salzburg

The sound of Salzburg

"It is based on the true story of Maria von Trapp, even though I suspect she didn’t go singing alone in the mountain ranges."
Conquering Machu Picchu

Conquering Machu Picchu

"A life-long dream came true this morning, as I stood upon the mountain looking down at Machu Picchu. I felt like some strange mix between Indiana Jones and a small boy, gazing down upon the final treasure of the Incas."
Aliens in Nevada and New Mexico

Aliens in Nevada and New Mexico

"We turned around and went down another dirt road, past countless Joshua trees until our car was covered in dirt and we finally arrived at the Front Gate of Area 51."

Instagram

Seville
Venice
Gothenburg
Fever Ray
Rome
Basel
Singapore
Kuala Lumpur