color-stop

Specifies an intermediary color value for a gradient.

color-stop(stop, color)

Parameters

stop

The point in the gradient that should have the specified color value. Represented as a percentage or a decimal value between 0 and 1.

color

The color of the gradient at the stop.

Discussion

For more information, see -webkit-gradient.

Availability

Available in Safari 4.0 and later.

from

A convenience function for the color-stop function that specifies the first color stop in a gradient.

from(color)

Parameters

color

The color of the gradient at the stop.

Discussion

Equivalent to calling color-stop() with a stop value of 0%.

Availability

Available in Safari 4.0 and later.

to

A convenience function for the color-stop function that specifies the last color stop in a gradient.

to(color)

Parameters

color

The color of the gradient at the stop.

Discussion

Equivalent to calling color-stop() with a stop value of 100%.

Availability

Available in Safari 4.0 and later.

-webkit-gradient

Generates a gradient image.

-webkit-gradient(type, start_point, end_point, / stop...)

-webkit-gradient(type, inner_center, inner_radius, outer_center, outer_radius, / stop...)

Parameters

type

The type of gradient. Can be linear or radial.

start_point

The point in the image at which the linear gradient begins.

end_point

The point in the image at which the linear gradient ends.

stop

A color-stop() function indicating the desired color for the gradient at a particular point in its progression.

inner_center

The center point of the inner, starting circle in a radial gradient.

inner_radius

The radius of the inner, starting circle in a radial gradient.

outer_center

The center point of the outer, ending circle in a radial gradient.

outer_radius

The radius of the outer, ending circle in a radial gradient.

Constants

left top

The point corresponding to the top left corner of the image.

left bottom

The point corresponding to the bottom left corner of the image.

right top

The point corresponding to the top right corner of the image.

right bottom

The point corresponding to the bottom right corner of the image.

Discussion

-webkit-gradient() can be used in any place an image URL is used.

A linear gradient determines its color by interpolating between values specified by the color-stop() functions provided. Each color-stop() function specifies a percentage or a decimal between 0 and 1 and a color, indicating that the gradient should have the specified color value at the specified fraction of the gradient’s length. The shorthand functions from() and to() are supported as special-case color-stop() functions. The following example creates a linear gradient that shifts from yellow to orange in its first half and from orange to red in its second half, moving from the top left of the image to the bottom right of the image:

-webkit-gradient(linear, left top, right bottom, from(#ff0), color-stop(0.5, orange), to(rgb(255, 0, 0));

A radial gradient specifies its start and end with two (typically concentric) circles, each identified by a center point and radius. The color value at a point between the circumference of the inner circle and the circumference of the outer circle is determined by interpolating between color-stop() functions. The color value inside the inner circle is the color value of the first color-stop() function.

Availability

Available in Safari 4.0 and later.

-webkit-linear-gradient

Generates a linear gradient image.

-webkit-linear-gradient(direction | angle, color_stop,... )

Parameters

direction

Specifies the gradient line which gives the gradient a direction and determines how color stops are positioned. Possible values are described in “Constants.” The default value is top.

angle

Optionally, specifies the gradient line as an angle value where 0 degrees is east, 90 degrees is north, and positive angles are counter-clockwise.

color_stop

A color for the gradient at a particular point in its progression. You can specify multiple color stops including a start and end color.

Color stops are expressed as two values with the following syntax: color | stop.

color

The color of the gradient at the stop. This parameter is mandatory.

stop

The point in the gradient that should have the specified color value. The position can be specified in pixels or as a percentage of the gradient line. When a position is not specified, the browser distributes the color stop evenly between the adjacent color stops. Color stops at the same position result in sharp color changes.

Constants

bottom

The bottom side of the image.

bottom left

The bottom left corner of the image.

bottom right

The bottom right corner of the image.

left

The left side of the image.

top

The top side of the image.

top left

The top left corner of the image.

top right

The top right corner of the image.

right

The right side of the image.

Discussion

Parameters that have default values are optional. However, two or more color stops are required to render a gradient.

For example, you can create a paper roll effect on one side:

.ribbon {

background-image:

-webkit-linear-gradient(

left, #900, #F33 10px, red 50px);

}

This can be combined with another gradient to create a ribbon with a diagonal edge:

.ribbon {

background-image:

-webkit-linear-gradient(

left, #900, #F33 10px, rgba(255, 0, 0, 0) 50px),

-webkit-linear-gradient(135deg, transparent 25%, red 25%);

}

Availability

Available in Safari 5.1 and later.

Available in iOS 5.0 and later.

-webkit-radial-gradient

Generates a radial gradient image.

-webkit-radial-gradient(center, [shape ||  size] | [length | percentage], color_stop,...)

Parameters

center

The center point of the cirlce or ellipse. This parameter allows you to move the origin of the shape. The position can be specified in terms of pixels or percentages of the image or using the keywords top, left, center, right, or bottom. The default is center.

shape

The shape of the radient. Possible values are circle and ellipse. The default is ellipse.

size

The size of the radient. Possible values are closest-side, closest-corner, farthest-side, farthest-corner, contain, and cover. The default is cover.

length

Optionally, specifies the shape of an eclipse by providing two lengths: the length of the horizontal and vertical axes of the ellipse. The axis length is the length from the center of the ellipse to the edge, not the diameter. The lengths must be non-negative.

percentage

Optionally, specifies the shape of an eclipse by providing two percentage values: the percentage of the horizontal and vertical axes of the eclipse relative to the width and height of the box. The percentages must be non-negative.

color_stop

A color for the gradient at a particular point in its progression. You can specify multiple color stops including a start and end color.

Color stops are expressed as two values with the following syntax: color | stop.

color

The color of the gradient at the stop. This parameter is mandatory.

stop

The point in the gradient that should have the specified color value. The position can be specified in pixels or as a percentage of the gradient line. When a position is not specified, the browser distributes the color stop evenly between the adjacent color stops. Color stops at the same position result in sharp color changes.

For example, specify a gradient that progresses equally from red to green and then green to blue as follows:

-webkit-linear-gradient(left, red, green, blue)

Specify a gradient where red starts at 20px and blue starts at 90% with other colors distributed between as follows:

-webkit-linear-gradient(bottom left, red 20px, yellow, green, blue 90%)

Create a sharp color change between green and purple as follows:

-webkit-linear-gradient(top left, red, yellow, green 60%, purple 60%, blue)

Discussion

Parameters that have default values are optional. However, one or more color stops are required to render a gradient. If only one parameter is provided before the color stops and it could be interpreted as either a position or an explicit size, it is assumed to be a position.

For example, the following gradient is centered in the box and is large enough to fill it to the corners:

-webkit-radial-gradient(white, black)

This is equivalent to:

-webkit-radial-gradient(center, ellipse cover, white, black)

You can also specify an alternate origin than center as follows:

-webkit-radial-gradient(10% 30%, white, black)

Examples of specifying the shape and size of the gradient are:

-webkit-radial-gradient(30% 30%, closest-corner, white, black)

-webkit-radial-gradient(30% 30%, circle closest-corner, white, black)

where circle specifies the shape and closest-corner specifies the size.

You can also specify the ending radius of the gradient explicitly and separately for the horizontal and vertical axes:

-webkit-radial-gradient(center, 5em 40px, white, black)

where 5em is the x-value and 40px is the y-value.

If only percentages appear before color stops, the parameters are interpreted as a starting point, not the size of the ellipse:

-webkit-radial-gradient(10% 10%, red, blue)

Availability

Available in Safari 5.1 and later.

Available in iOS 5.0 and later.

-webkit-repeating-linear-gradient

Generates a linear gradient where the specified color stops repeat in both directions to fill the image.

-webkit-linear-gradient(direction | angle, color_stop,... )

Parameters

direction

Specifies the gradient line which gives the gradient a direction and determines how color stops are positioned. Possible values are described in “Constants.” The default value is top.

angle

Specifies the gradient line as an angle value where 0 degrees is east, 90 degrees is north, and positive angles are counter-clockwise.

color_stop

A color for the gradient at a particular point in its progression. You can specify multiple color stops including a start and end color.

Color stops are expressed as two values with the following syntax: color | stop.

color

The color of the gradient at the stop. This parameter is mandatory.

stop

The point in the gradient that should have the specified color value. The position can be specified in pixels or as a percentage of the gradient line. When a position is not specified, the browser distributes the color stop evenly between the adjacent color stops. Color stops at the same position result in sharp color changes.

Constants

bottom

The bottom side of the image.

bottom left

The bottom left corner of the image.

bottom right

The bottom right corner of the image.

left

The left side of the image.

top

The top side of the image.

top left

The top left corner of the image.

top right

The top right corner of the image.

right

The right side of the image.

Discussion

The parameters are the same as -webkit-linear-gradient except the color stops are repeated. If a parameter is omitted, the default value is used.

The specified color stops are repeated infinitely in both directions by aligning them end-to-end. For example, this gradient:

-webkit-repeating-linear-gradient(red 10px, blue 50px)

is interpreted as:

-webkit-repeating-linear-gradient(..., red -30px, blue 10px, red 10px, blue 50px, red 50px, blue 90px, ...)

Note that the boundary between the last color stop and the first color stop may result in a sharp color change. To avoid this, use the same color in the first and last color stop as in:

-webkit-repeating-linear-gradient(red, blue 10%, red 20%)

Availability

Available in Safari 5.1 and later.

Available in iOS 5.0 and later.

-webkit-repeating-radial-gradient

Generates a radial gradient where the specified color stops repeat in both directions to fill the image.

-webkit-radial-gradient(start_position, [shape ||  size] | [length | percentage], color_stop,...)

Parameters

start_position

The starting point of the radial gradient. This parameter allows you to move the origin of the shape. The position can be specified in terms of pixels or percentages of the image or using the keywords top, left, center, right, or bottom. The default is center.

shape

The shape of the radient. Possible values are circle and ellipse. The default is ellipse.

size

The size of the radient. Possible values are closest-side, closest-corner, farthest-side, farthest-corner, contain, and cover. The default is cover.

length

Specifies the shape of an eclipse by providing two lengths: the length of the horizontal and vertical axes of the ellipse. The axis length is the length from the center of the ellipse to the edge, not the diameter. The lengths must be non-negative.

percentage

Specifies the shape of an eclipse by providing two percentage values: the percentage of the horizontal and vertical axes of the eclipse relative to the width and height of the box. The percentages must be non-negative.

color_stop

A color for the gradient at a particular point in its progression. You can specify multiple color stops including a start and end color.

Color stops are expressed as two values with the following syntax: color | stop.

color

The color of the gradient at the stop. This parameter is mandatory.

stop

The point in the gradient that should have the specified color value. The position can be specified in pixels or as a percentage of the gradient line. When a position is not specified, the browser distributes the color stop evenly between the adjacent color stops. Color stops at the same position result in sharp color changes.

Discussion

The parameters are the same as -webkit-radial-gradient except the color stops are repeated. If a parameter is omitted, the default value is used.

For example, you can create a bulls-eye effect as follows:

-webkit-repeating-radial-gradient(

transparent, rgba(0, 0, 0, 0.3) 50px);

Availability

Available in Safari 5.1 and later.

Available in iOS 5.0 and later.

cubic-bezier

Specifies a cubic Bézier curve.

cubic-bezier(P1x,P1y,P2x,P2y)

Parameters

P1x, P1y

First point in the Bézier curve.

P2x, P2y

Second point in the Bézier curve.

Discussion

A cubic Bézier curve is defined by four control points, P0 through P3. P0 and P3 are always set to (0,0) and (1,1). This function is used to set the values for the points in between, points P1 and P2. Each point is specified by both an x and y value.

Availability

Available in Safari 3.1 and later.

Available in iOS 2.0 and later.

steps

Defines steps from one frame to another, not a smooth transition.

steps(number, point)

Parameters

number

The number of intervals in the function. Must be greater than 0.

point

The point at which the change of values occur within the interval. Possible values are start or end. The default value is end.

Discussion

Stepping functions are appropriate for progress indicators. A stepping function is defined by a number of equal duration intervals and whether the change in output percentage happens at the start or end of the interval.

Availability

Available in iOS 5.0 and later.

matrix

Specifies a 2D transformation in the form of a transformation matrix of six values.

matrix(m11, m12, m21, m22, tX, tY)

Parameters

m11, m12, m21, m22

Elements of a 2 x 2 matrix in column-major order.

1,1	2,1
1,2	2,2

tX, tY

The x and y translation elements.

Discussion

Passing matrix(a,b,c,d,e,f) is equivalent to applying the transformation matrix [a b c d e f].

Availability

Available in Safari 3.1 and later.

Available in iOS 2.0 and later.

matrix3d

Specifies a 3D transformation as a 4 x 4 matrix.

matrix3d(m00, m01, m02, m03, m10, m11, m12, m13, m20, m21, m22, m23, m30, m31, m31, m33)

Parameters

m00, m01, m02, m03, m10, m11, m12, m13, m20, m21, m22, m23, m30, m31, m31, m33

Defines a 4 x 4 homogeneous matrix of 16 values in column-major order (0,0; 0,1; 0,2; ...).

0,0	1,0	2,0	3,0
0,1	1,1	2,1	3,1
0,2	1,2	2,2	3,2
0,3	1,3	2,3	3,3

Availability

Available in Safari 4.0.3 and later running on Mac OS X v10.6 and later.

Available in iOS 2.0 and later.

perspective

Specifies a perspective projection matrix.

perspective(depth)

Parameters

depth

The distance, in pixels, of the z=0 plane from the viewer.

Discussion

This matrix maps a viewing cube onto a pyramid whose base is infinitely far away from the viewer and whose peak represents the viewer's position.

The viewable area is the region bounded by the four edges of the viewport (the portion of the browser window used for rendering the webpage between the viewer’s position and a point at a distance of infinity from the viewer).

Lower values for this property give a more flattened pyramid and therefore a more pronounced perspective effect. A value of 1000 pixels gives a moderate amount of foreshortening, and a value of 200 pixels gives an extreme amount.

Availability

Available in Safari 4.0.3 and later running on Mac OS X v10.6 and later.

Available in iOS 2.0 and later.

rotate

Specifies a 2D rotation around the origin of the element.

rotate(angle)

Parameters

angle

The rotation angle. The angle may be specified using deg, rad or grad units.

Discussion

The rotation operation corresponds to the matrix [cos(angle) sin(angle) -sin(angle) cos(angle) 0 0]. The origin of the element is specified using the -webkit-transform-origin property.

Availability

Available in Safari 3.1 and later.

Available in iOS 2.0 and later.

rotate3d

Specifies a clockwise 3D rotation.

rotate3d(x, y, z, angle)

Parameters

x, y, z

The [x,y,z] direction vector for the rotation.

If the direction vector is not of unit length, it will be normalized. If the direction vector cannot be normalized, such as [0, 0, 0], the rotation will not be applied.

angle

The rotation angle. The angle may be specified using deg, rad or grad units.

Availability

Available in Safari 4.0.3 and later running on Mac OS X v10.6 and later.

Available in iOS 2.0 and later.

rotateX

Specifies a clockwise rotation by the given angle about the x-axis.

rotateX(angle)

Parameters

angle

The rotation angle. The angle may be specified using deg, rad or grad units.

Availability

Available in Safari 4.0.3 and later running on Mac OS X v10.6 and later. Available in iOS 2.0 and later.

rotateY

Specifies a clockwise rotation by the given angle about the y-axis.

rotateY(angle)

Parameters

angle

The rotation angle. The angle may be specified using deg, rad or grad units.

Availability

Available in Safari 4.0.3 and later running on Mac OS X v10.6 and later.

Available in iOS 2.0 and later.

rotateZ

Specifies a clockwise rotation by the given angle about the z-axis.

rotateZ(angle)

Parameters

angle

The angle of the rotation. The angle may be specified using deg, rad or grad units.

Availability

Available in Safari 4.0.3 and later running on Mac OS X v10.6 and later.

Available in iOS 2.0 and later.

scale

Specifies a 2D scale operation.

scale(scaleX [, scaleY])

Parameters

scaleX

The scaling factor to apply in the x direction.

scaleY

The scaling factor to apply in the y direction. If not specified, defaults to scaleX.

Availability

Available in Safari 3.1 and later.

Available in iOS 2.0 and later.

scale3d

Specifies a 3D scale operation.

scale3d(scaleX, scaleY, scaleZ)

Parameters

scaleX

The scaling factor to apply in the x direction.

scaleY

The scaling factor to apply in the y direction.

scaleZ

The scaling factor to apply in the z direction.

Availability

Available in Safari 4.0.3 and later running on Mac OS X v10.6 and later.

Available in iOS 2.0 and later.

scaleX

Scales in the x direction.

scaleX(sx)

Parameters

sx

The scaling factor to apply to the x direction.

Discussion

This function specifies a scale operation using the [sx, 1, 1] scaling vector.

Availability

Available in Safari 4.0.3 and later running on Mac OS X v10.6 and later.

Available in iOS 2.0 and later.

scaleY

Scales in the y direction.

scaleY(sy)

Parameters

sy

The scaling factor to apply to the y direction.

Discussion

This function specifies a scale operation using the [1,sy,1] scaling vector.

Availability

Available in Safari 4.0.3 and later running on Mac OS X v10.6 and later.

Available in iOS 2.0 and later.

scaleZ

Scales in the z direction.

scaleZ(sz)

Parameters

sz

The scaling factor to apply to the z direction.

Discussion

This function specifies a scale operation using the [1,1,sz] scaling vector.

Availability

Available in Safari 4.0.3 and later running on Mac OS X v10.6 and later.

Available in iOS 2.0 and later.

skew

Specifies a skew transformation along the x and y axes by given angles.

skew(angleX [, angleY])

Parameters

angleX

The angle of the skew along the x-axis. The angle may be specified using deg, rad or grad units.

angleY

The angle of the skew along the y-axis. The angle may be specified using deg, rad or grad units. If not specified, defaults to 0.

Availability

Available in Safari 3.1 and later.

Available in iOS 2.0 and later.

skewX

Specifies a skew transformation along the x-axis by the given angle.

skewX(angle)

Parameters

angle

The angle of the skew. The angle may be specified using deg, rad or grad units.

Availability

Available in Safari 3.1 and later. Available in iOS 2.0 and later.

skewY

Specifies a skew transformation along the x-axis by the given angle.

skewY(angle)

Parameters

angle

The angle of the skew. The angle may be specified using deg, rad or grad units.

Availability

Available in Safari 3.1 and later.

Available in iOS 2.0 and later.

translate

Specifies a 2D translation vector.

translate(deltaX [, deltaY])

Parameters

deltaX

The number of units to translate along the x-axis. This value may be a percentage or a length.

deltaY

The number of units to translate along the y-axis. If not specified, the y translation defaults to 0. This value may be a percentage or a length.

Availability

Available in Safari 3.1 and later.

Available in iOS 2.0 and later.

translate3d

Specifies a 3D translation vector.

translate3d(deltaX, deltaY, deltaZ)

Parameters

deltaX

The number of units to translate along the x-axis. This value may be a percentage or a length.

deltaY

The number of units to translate along the y-axis. This value may be a percentage or a length.

deltaZ

The number of units to translate along the z-axis. This value may be a percentage or a length.

Availability

Available in Safari 4.0.3 and later running on Mac OS X v10.6 and later. Available in iOS 2.0 and later.

translateX

Specifies a translation in the x direction.

translateX(deltaX)

Parameters

deltaX

The number of units to translate along the x-axis. This value may be a percentage or a length.

Availability

Available in Safari 3.1 and later.

Available in iOS 2.0 and later.

translateY

Specifies a translation in the y direction.

translateY(deltaY)

Parameters

deltaY

The number of units to translate along the y-axis. This value may be a percentage or a length.

Availability

Available in Safari 3.1 and later. Available in iOS 2.0 and later.

translateZ

Specifies a translation in the z direction.

translateZ(deltaZ)

Parameters

deltaZ

The number of units to translate along the z-axis. This value may be a percentage or a length.

Availability

Available in Safari 4.0.3 and later running on Mac OS X v10.6 and later.

Available in iOS 2.0 and later.

blur

Applies a Gaussian blur to the element.

blur(radius)

Parameters

radius

The blur radius, in pixels.

Discussion

The radius is a specific CSS length and does not accept percentage values.

Availability

Available in Safari 6.0 and later.

brightness

Applies a linear multiplier to the image, making it brighter or darker.

brightness(amount)

Parameters

amount

The amount of brightness, as a percentage.

Discussion

An amount of -100% will create an image that is completely black. An amount of 100% will create an image that is completely white. An amount of 0% leaves the input unchanged.

Availability

Available in Safari 6.0 and later.

contrast

Adjusts the contrast of the element.

contrast(amount)

Parameters

amount

The amount of contrast, as a percentage.

Discussion

An amount of 0% will create an image that is completely gray. An amount of 100% leaves the image unchanged. Amounts in between linearly affect the contrast.

Availability

Available in Safari 6.0 and later.

drop-shadow

Applies a drop shadow effect to the image.

drop-shadow(h-off v-off blur color)

Parameters

h-off

The horizontal offset of the shadow, in pixels.

v-off

The vertical offset of the shadow, in pixels.

blur

The blur radius of the shadow, in pixels.

color

The color of the shadow.

Discussion

The function accepts the same parameters as the -webkit-box-shadow property, with the exception that the inset keyword is not allowed.

Availability

Available in Safari 6.0 and later.

grayscale

Desaturates the image.

grayscale(amount)

Parameters

amount

The percentage of desaturation.

Discussion

An amount of 100% is completely grayscale. An amount of 0% leaves the image unchanged.

Availability

Available in Safari 6.0 and later.

hue-rotate

Desaturates the image.

hue-rotate(angle)

Parameters

angle

The number of degrees around the color circle the image’s color samples will be adjusted.

Discussion

An angle of 0deg leaves the image unchanged.

Availability

Available in Safari 6.0 and later.

invert

Inverts the colors of the image.

invert(amount)

Parameters

amount

The percentage of inversion.

Discussion

An amount of 100% is completely inverted. An amount of 0% leaves the image unchanged. Amounts in between are linear multipliers on the effect.

Availability

Available in Safari 6.0 and later.

opacity

Applies transparency to the image.

opacity(amount)

Parameters

amount

The percentage of opacity.

Discussion

An amount of 0% is completely transparent. An amount of 100% leaves the image unchanged.

Availability

Available in Safari 6.0 and later.

saturate

Saturates the image.

saturate(amount)

Parameters

amount

The percentage of saturation.

Discussion

An amount of 0% is completely unsaturated. An amount of 100% leaves the image unchanged. Amounts over 100% are allowed, providing super-saturated results.

Availability

Available in Safari 6.0 and later.

sepia

Applies a sepia effect to the image.

sepia(amount)

Parameters

amount

The percentage of sepia effect to apply.

Discussion

An amount of 100% is completely sepia. An amount of 0% leaves the input unchanged. Amounts in between are linear multipliers on the effect.

Availability

Available in Safari 6.0 and later.

-webkit-canvas

Specifies a canvas for drawing programmatically with Javascript.

-webkit-canvas(canvas)

Parameters

canvas

The name of the canvas.

Discussion

The -webkit-canvas() function can be used in any place an image URL is used.

Canvases specified with the -webkit-canvas() function can be accessed in Javascript with the method getCSSCanvasContext(), which returns a CanvasRenderingContext object. The identifier passed to getCSSCanvasContext() should be the same as the value for canvas.

Specifying a new width or height for the canvas in subsequent calls to getCSSCanvasContext() clears the canvas buffer.

Availability

Available in Safari 4.0 and later.