Filters, effects & masking

box-shadow

Draws one or more shadows around the border box, or inside the padding box with inset. Each <spread-shadow> is an optional colour, an x and y offset, an optional blur radius, an optional spread distance and the optional inset keyword. The first shadow in the list is drawn on top.

A shadow follows border-radius and takes up no space in the layout. A positive spread grows the shadow before it is blurred; a negative spread shrinks it.

box-shadow:
  0 1px 2px rgb(0 0 0 / 0.2),   /* tight contact shadow */
  0 8px 24px -4px rgb(0 0 0 / 0.15); /* soft, lifted shadow */

filter

Applies graphical effects to the element and its contents as one image: blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate() and sepia(), or a url() pointing at an SVG <filter>. A <filter-value-list> is a space-separated list of these, applied in order. See Filter functions.

Any value other than none creates a stacking context and makes the element the containing block for its absolutely and fixed positioned descendants. Unlike box-shadow, drop-shadow() follows the shape of the visible pixels, so it works on transparent images.

backdrop-filter

Applies filter functions to whatever is painted behind the element, inside its border box. The element needs a transparent or translucent background for the effect to show; backdrop-filter: blur(12px) gives the frosted-glass look.

mix-blend-mode

How the element's colours combine with the content behind it. A <blend-mode> is one of normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color or luminosity. plus-lighter adds the colours together, which gives a clean cross-fade between two overlapping images.

The element blends with everything in its stacking context behind it. To limit the blend to a group, set isolation: isolate on the group.

background-blend-mode

How an element's background layers blend with each other and with its background-color. It takes one blend mode per layer, in the same order as background-image. The backgrounds do not blend with content behind the element.

isolation

An <isolation-mode> is auto or isolate. isolate makes the element a new stacking context, so descendants with a mix-blend-mode blend only with each other and not with what lies behind the element.

clip-path

Clips the element to a shape: everything outside it is not painted and does not receive pointer events. The shape is a <basic-shape> such as circle(), ellipse(), inset(), polygon() or path(), a reference box such as border-box, or both. A <clip-source> is a url() pointing at an SVG <clipPath>.

Two shapes of the same kind with the same number of points can be transitioned, which makes clip-path a common choice for reveal animations. See Shapes & images for the shape functions.

clip Deprecated

Clips an absolutely positioned element to a rectangle given by rect(). It is deprecated: use clip-path instead, for example clip-path: inset(50%).

mask

Shorthand for the mask-* longhands below. Like background, it takes a comma-separated list of layers, and each <mask-layer> sets an image, position, size, repeat, origin, clip, compositing operator and mode. Where the mask is opaque (or bright, in luminance mode) the element shows; where it is transparent the element is hidden.

mask-image

The images used as mask layers. A <mask-reference> is none, an <image> such as a gradient or url() to an image file, or a url() pointing at an SVG <mask> element. A gradient to transparent fades the element out.

mask-mode

Whether each mask layer is read by its alpha channel or its luminance. A <masking-mode> is alpha, luminance or match-source, which uses the SVG <mask> element's mask-type for mask references and alpha for images.

mask-repeat

How mask images tile. It takes the same values as background-repeat: repeat, no-repeat, repeat-x, repeat-y, space and round.

mask-position

Where each mask image sits inside its origin box, written like background-position.

mask-clip

The area the mask affects; outside it the element is hidden. A <coord-box> is content-box, padding-box, border-box, or for SVG fill-box, stroke-box or view-box. no-clip leaves the painted area unclipped.

mask-origin

The box that mask images are positioned and sized against, in the same way as background-origin.

mask-size

The size of each mask image, written like background-size: auto, cover, contain, or one or two lengths or percentages.

mask-composite

How each mask layer combines with the layers below it. A <compositing-operator> is add (union), subtract (cut this layer out of the ones below), intersect (keep only the overlap) or exclude (keep everything but the overlap).

mask-border

Shorthand for a mask that is sliced and stretched over the element's edges in the same way as border-image, so a small image can mask a box of any size. Only Safari ships the unprefixed properties.

mask-border-source

The image used for the mask border, as for border-image-source.

mask-border-slice

Where to cut the mask border image into corners, edges and a middle, as for border-image-slice.

mask-border-width

The width of the mask border on each side, as for border-image-width.

mask-border-outset

How far the mask border area extends beyond the border box, as for border-image-outset.

mask-border-repeat

How the edge and middle slices of the mask border image fill their areas: stretched, repeated, rounded or spaced, as for border-image-repeat.

object-fit

How the content of a replaced element, such as an <img> or <video>, is sized to fit its box when the two have different proportions.

Pair object-fit: cover with a fixed aspect-ratio on the image for uniform thumbnails; object-position chooses which part stays in view.

object-position

Where the content of a replaced element sits inside its box, written like background-position. It decides which part is cropped with object-fit: cover, or where the spare space goes with contain.

object-view-box

Selects a rectangle of a replaced element's content to show, as if the content were cropped to it before object-fit applies. A <basic-shape-rect> is inset(), rect() or xywh(). Animating it gives a zoom or pan.

image-rendering

How an image is scaled. auto lets the browser smooth it; pixelated and crisp-edges keep hard edges, which suits pixel art and QR codes scaled up.

image-orientation

Whether images are rotated according to the orientation stored in their metadata, as cameras record it. from-image, the default, honours it; none shows the image as encoded.