Images, shapes & positions
The types for images and gradients, URLs, geometric shapes, positions inside a box, the box keywords that pick a reference edge, blend modes and corner shapes. The functions that produce these values are under Gradients and Shapes & images; colours are under Colors.
Images
<image>
A two-dimensional image: a file loaded with url(), a gradient generated by the browser, or a choice between candidate images with image-set(). Gradients have no natural size and fill whatever area they are given.
| Syntax | <url> | <image()> | <image-set()> | <cross-fade()> | <element()> | <gradient> |
|---|---|
| Used by | background-image, border-image-source, mask-image, list-style-image, content, shape-outside |
| Support | Chrome 1 · Firefox 1 · Safari 1 |
| Spec | css-images-4 |
| Form | Gives | Support |
|---|---|---|
url() | An image file: PNG, JPEG, GIF, WebP, AVIF, SVG and so on. | All browsers |
<gradient> | A linear, radial or conic gradient. | Chrome 26 · Firefox 3.6 · Safari 7 |
image-set() | The best of several candidates, chosen by resolution or file type. | Chrome 113 · Firefox 89 · Safari 17 |
cross-fade() | A blend of two images at a given percentage. | Chrome no · Firefox no · Safari 10 |
background-image: image-set("hero.avif" type("image/avif"), "hero.jpg" type("image/jpeg"));<gradient>
An image of colours blending smoothly along a line, out from a point, or around a centre. The repeating forms tile their colour stops to fill the box.
| Syntax | [ <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()> | <repeating-conic-gradient()> ] |
|---|---|
| Used by | Anywhere an <image> is accepted, most often background-image and mask-image |
| Support | Chrome 26 · Firefox 3.6 · Safari 7 Conic gradients: Chrome 69 · Firefox 83 · Safari 12.1 Colour interpolation method ( in oklch …): Chrome 111 · Firefox 127 · Safari 16.2 |
| Spec | css-images-4 |
Each gradient function is described under Gradients. Every form accepts a <color-interpolation-method> to choose the colour space the stops blend in.
background: linear-gradient(to right in oklab, #0b6, #06c);<url>
A reference to a file, written url("path"). The quotes are optional, but an unquoted URL cannot contain spaces, quotes or brackets without escaping. A relative URL resolves against the stylesheet it appears in, not the page.
| Syntax | <url()> | <src()> |
|---|---|
| Used by | <image> values, cursor, filter and clip-path (to reference SVG), @import and the src descriptor of @font-face |
| Support | Chrome 1 · Firefox 1 · Safari 1 Request modifiers cross-origin(), referrer-policy(): Chrome 150 · Firefox no · Safari 26.2Request modifier integrity(): Chrome 150 · Firefox no · Safari no |
| Spec | css-values-4 |
A URL starting with # points at an element in the current document, as in clip-path: url(#wave) for an inline SVG <clipPath>.
Shapes & positions
<basic-shape>
A geometric shape described by a function: a rectangle, circle, ellipse, polygon or free path. Shapes are drawn in a reference box, which the property using them can name with a box keyword.
| Syntax | <basic-shape-rect> | <circle()> | <ellipse()> | <polygon()> | <path()> | <shape()> |
|---|---|
| Used by | clip-path, shape-outside, offset-path, object-view-box |
| Support | Chrome 37 · Firefox 54 · Safari 10.1 |
| Spec | css-shapes-1 |
| Function | Shape | Support |
|---|---|---|
inset() | A rectangle inset from the box edges, with optional rounded corners. | Chrome 37 · Firefox 54 · Safari 10.1 |
rect(), xywh() | A rectangle by its edges, or by position and size. | Chrome 119 · Firefox 122 · Safari 17.2 |
circle() | A circle with a radius and centre. | Chrome 37 · Firefox 54 · Safari 10.1 |
ellipse() | An ellipse with two radii and a centre. | Chrome 37 · Firefox 54 · Safari 10.1 |
polygon() | Straight lines between a list of points. | Chrome 37 · Firefox 54 · Safari 10.1 |
path() | An SVG path data string. | Chrome 52 · Firefox 72 · Safari 13.1 |
shape() | A path written with CSS commands and units, so it can be responsive. | Chrome 135 · Firefox 148 · Safari 18.4 |
See Shapes & images for each function's arguments. A shape can animate to another shape made by the same function; two polygon() shapes also need the same number of points.
clip-path: polygon(50% 0, 100% 100%, 0 100%);<position>
A point inside a box, given as one, two or four parts. Keywords name an edge or the centre; lengths and percentages measure from the left and top edges. A percentage aligns the same point of the item with the same point of the box, so 100% 100% puts an image flush in the bottom-right corner.
| Syntax | <position-one> | <position-two> | <position-four> |
|---|---|
| Used by | background-position, object-position, mask-position, perspective-origin, offset-position, and the at part of radial-gradient() and circle() |
| Support | Chrome 1 · Firefox 1 · Safari 1 Four-value form: Chrome 25 · Firefox 13 · Safari 7 |
| Spec | css-values-5 |
| Form | Example | Meaning |
|---|---|---|
| One value | center, top, 25% | The other axis is center. |
| Two values | left top, 30% 2rem | Horizontal then vertical. Two keywords may come in either order. |
| Four values | right 1rem bottom 2rem | Each keyword is followed by an offset from that edge. |
Reference boxes
<visual-box>
One of the three CSS boxes an element draws: its content, its content plus padding, or everything up to the outer edge of its border.
| Syntax | content-box | padding-box | border-box |
|---|---|
| Used by | background-origin, background-clip, overflow-clip-margin, and the box types below |
| Spec | css-box-4 |
| Keyword | Edge |
|---|---|
content-box | The edge of the content area, inside the padding. |
padding-box | The outer edge of the padding, inside the border. |
border-box | The outer edge of the border. |
<coord-box>
A reference box for drawing and positioning: one of the visual boxes, or for SVG elements the fill box, stroke box or the nearest viewport. Its <paint-box> part is the visual boxes plus fill-box and stroke-box.
| Syntax | <paint-box> | view-box, where <paint-box> is <visual-box> | fill-box | stroke-box |
|---|---|
| Used by | mask-clip, mask-origin, offset-path |
| Spec | css-box-4 |
<shape-box>
The reference box for a float's wrap shape: one of the visual boxes, or margin-box to include the float's margins. Text wraps around the chosen box, or around a <basic-shape> drawn in it.
| Syntax | <visual-box> | margin-box | half-border-box |
|---|---|
| Used by | shape-outside |
| Spec | css-shapes-1 |
<geometry-box>
The reference box for a clipping shape. It accepts the CSS boxes and the SVG boxes, so the same clip-path works on HTML and SVG elements.
| Syntax | <shape-box> | fill-box | stroke-box | view-box |
|---|---|
| Used by | clip-path |
| Spec | css-masking-1 |
| Keyword | Box |
|---|---|
margin-box | The outer edge of the margin. |
fill-box | The object bounding box of an SVG element: its geometry without the stroke. On HTML elements, content-box. |
stroke-box | The SVG stroke bounding box, including the stroke. On HTML elements, border-box. |
view-box | The nearest SVG viewport. On HTML elements, border-box. |
clip-path: circle(50%) padding-box;Blending & corners
<blend-mode>
How a layer's colours combine with the colours behind it, as in image-editing software. The separable modes work on each colour channel independently; the last four work on hue, saturation and luminosity.
| Syntax | normal | darken | multiply | color-burn | lighten | screen | color-dodge | overlay | soft-light | hard-light | difference | exclusion | hue | saturation | color | luminosity |
|---|---|
| Used by | mix-blend-mode, background-blend-mode |
| Support | Chrome 35 · Firefox 30 · Safari 8 |
| Spec | compositing-2 |
| Mode | Result |
|---|---|
normal | The top colour only; no blending. |
multiply | Multiplies the colours. Always darker; white has no effect. |
screen | Multiplies the inverses. Always lighter; black has no effect. |
overlay | multiply or screen, depending on the backdrop colour. |
darken | The darker of the two, channel by channel. |
lighten | The lighter of the two, channel by channel. |
color-dodge | Brightens the backdrop to reflect the top colour. |
color-burn | Darkens the backdrop to reflect the top colour. |
hard-light | multiply or screen, depending on the top colour. |
soft-light | A gentler version of hard-light. |
difference | The absolute difference between the colours. |
exclusion | Like difference, with lower contrast. |
hue | The top layer's hue with the backdrop's saturation and luminosity. |
saturation | The top layer's saturation with the backdrop's hue and luminosity. |
color | The top layer's hue and saturation with the backdrop's luminosity. |
luminosity | The top layer's luminosity with the backdrop's hue and saturation. |
mix-blend-mode also accepts plus-lighter, which adds the colours together; it is not part of <blend-mode>, so background-blend-mode does not take it.
<corner-shape-value>
The shape of a rounded corner, drawn within the area that border-radius sets aside. Without a radius, the corner shape has no effect.
| Syntax | round | scoop | bevel | notch | square | squircle | <superellipse()> |
|---|---|
| Used by | corner-shape and its per-corner longhands such as corner-top-left-shape |
| Support | Chrome 139 · Firefox no · Safari no |
| Spec | css-borders-4 |
| Value | Corner | As superellipse() |
|---|---|---|
round | The usual convex quarter-ellipse. | superellipse(1) |
squircle | Between round and square, with a flatter curve. | superellipse(2) |
square | A sharp right-angled corner, as if there were no radius. | superellipse(infinity) |
bevel | A straight diagonal cut. | superellipse(0) |
scoop | A concave quarter-ellipse, curving inward. | superellipse(-1) |
notch | A concave right-angled notch. | superellipse(-infinity) |
border-radius: 1.5rem;
corner-shape: squircle;