You can use CSS to create stunning interactive visual effects—masks, gradients, reflections, lighting effects, animations, transitions, 3D rotations, and more. All of these visual effects can be applied interactively, using mouse events or touch events, so that HTML elements respond visibly to the user—without requiring plug-ins, graphic libraries, or elaborate JavaScript programs.

There are several advantages to using CSS instead of graphic images to create visual effects:

CSS effects are resolution-independent and scale up smoothly when zoomed.
Text formatted with CSS is searchable; images are not.
CSS is compact and compresses well compared with graphic images.
CSS is just text; it can be modified using a text editor or the output of a script.

There are also advantages to creating animation using CSS instead of JavaScript. JavaScript animation requires you to create timer-based step functions that change CSS properties incrementally over time. Using CSS to animate the changes is much easier and more efficient, and leverages browser optimization.

CSS visual effects are supported in Safari on OS X and iOS.

At a Glance

Safari CSS visual effects fall into three categories:

New visual CSS properties, such as gradients, masks, and reflections.
CSS-based animation of changes in CSS properties.
2D and 3D transforms of HTML elements using CSS.

The visual effects described in this document are Webkit extensions of CSS. Most of the extensions are proposals for W3C standards; some are in W3C drafts for CSS3. As the standards evolve, syntax for these effects is modified. This change is done carefully to allow new syntax to coexist with existing syntax, however. This means you can experiment with CSS extensions without having your website suddenly break when the standard is modified—in most cases, the old syntax still works. This document describes the current syntax as of this writing; many of the extensions have prior syntax that still works but is no longer recommended.

Note: Because these extensions are Webkit-specific, they are not supported in all browsers. Many of the extensions have equivalents in other Webkit-based browsers, however; for mobile-specific sites, Webkit browsers account for nearly all traffic. The extensions that are in W3C working drafts often have equivalents in many browsers using the same syntax. Nevertheless, unless you are writing an iOS web app, you should code your website to degrade gracefully for browsers that do not support these extensions. For the most part, this is automatic—an image may not have a reflection in some browsers, or a change in CSS properties may be immediate instead of animated—but the site remains functional and the layout is not broken. As always, you should test your website using all browsers that you wish to support, to ensure that all your users have an esthetically pleasing experience.

Enhance Your Site with Gradients, Masks, and Reflections

Add beautiful, resolution-independent color gradients to backgrounds and borders, with a single line of CSS.

Use masks to render portions of HTML elements transparent for elegant compositing. Apply a mask as you would a background or a border image. You can use an image as a mask for another image:

<img src="field.png" style="-webkit-mask-box-image: url(mask.png)>

You can also use a gradient as a mask, and you can mask any HTML element, not just images:

Add a reflection to any element; even use a gradient as a mask for a reflection:

Animate Changes in CSS Properties Using CSS

Specify the properties you want animated, and optionally supply a duration for the animation, and any change to CSS properties is automatically made into an animation of the HTML element, without using graphic plug-ins or even JavaScript. Use CSS pseudo-classes such as :HOVER to make the animations interactive—have elements fade in, grow, or enter from offscreen in response to touch or mouse events.

CSS animations come in two flavors: implicit animations that render changes smoothly over a defined period, and key-frame animations that allow for more complex behavior, such as moving from side to side or starting and stopping en route.

Apply 2D and 3D Transformations

You can apply 2D or 3D transforms to any HTML element, turning a group of div elements into the faces of a box, for example. Apply perspective and animation, and you can open and close the box, look inside it, and so on. 2D transforms include scaling, translation, shearing, reflection, and rotation about the z axis. 3D transforms add rotation about the x and y axis and displacement on the z axis.

Add touch and mouse interaction by implementing CSS pseudo-styles, such as :HOVER, or by writing your own JavaScript functions.