Color & backgrounds

color

The foreground colour of an element's text and text decorations. It is inherited, and it sets the value of currentColor, which borders, outlines, SVG fills and many other colour properties use by default.

The initial value CanvasText is the system colour for text on the default canvas, so it follows color-scheme: dark text in a light scheme, light text in a dark one.

opacity

Makes an element and everything inside it partly transparent, as one group. An <opacity-value> is a <number> or a <percentage>; 0 is fully transparent and 1 fully opaque.

Any value below 1 creates a stacking context. A child cannot be more opaque than its parent; to fade only a background, use a translucent colour such as rgb(0 0 0 / 50%) instead.

background

Shorthand for all the background longhands. Layers are separated by commas, the first on top; each <bg-layer> may give an image, a position with an optional / size, a repeat style, an attachment and one or two boxes. Only the last layer, <final-bg-layer>, may also give a background-color.

Like every shorthand, it resets any longhand you leave out to its initial value. One box keyword sets both background-origin and background-clip; two set origin then clip.

background: url(paper.png) center / cover no-repeat, #f4f1ea;

background-color

A solid colour painted beneath all the background images, filling the area set by background-clip.

background-image

One or more images to paint as background layers, separated by commas, with the first listed on top. Each <bg-image> is an <image> (a url(), a gradient or image-set()) or none.

The number of layers is set by this list. The other background longhands are matched to it item by item; a shorter list is repeated and a longer one is cut off.

background-image: linear-gradient(rgb(0 0 0 / 0), rgb(0 0 0 / 60%)), url(hero.jpg);

background-position

Where each background image is placed inside its positioning area. A <bg-position> is one to four values: keywords (left, center, bottom …), lengths or percentages.

Because percentages subtract the image size, 50% 50% centres the image and 100% 100% puts it flush in the bottom-right corner. The four-value form offsets from any edge: right 1rem bottom 1rem.

background-position-x, background-position-y

The background position in one physical axis, so you can change one axis without restating the other. The ! after the group means at least one of its parts must be given.

background-size

The size of each background image. A <bg-size> is cover, contain, or one or two lengths, percentages or auto (width, then height).

background-repeat

Whether and how each background image is tiled to fill its area. A <repeat-style> is repeat-x, repeat-y, or one or two of repeat, space, round and no-repeat (horizontal, then vertical).

background-attachment

Whether a background image moves with the element, with the element's scrolled content, or stays fixed to the viewport. An <attachment> is scroll, fixed or local.

background-origin

Which box is the background positioning area: the box that background-position and percentage background-size values are measured against. A <visual-box> is border-box, padding-box or content-box.

It has no effect on a layer with background-attachment: fixed, which is positioned against the viewport.

background-clip

How far the background is painted. A <bg-clip> is a <visual-box>, border-area or text. On the last layer it also clips background-color.

background: linear-gradient(90deg, teal, purple);
background-clip: text;
color: transparent;

color-scheme

Says which colour schemes an element is designed to be shown in. The browser then picks matching defaults for the canvas, form controls, scrollbars and system colours such as Canvas and CanvasText, and light-dark() resolves against it.

When several schemes are listed, the browser uses the one that matches the user's preference. normal means the element does not support schemes, so it gets the browser's default (light) colours. only asks the browser not to force a scheme the page did not list.

:root { color-scheme: light dark; }

forced-color-adjust

Whether the browser may replace an element's colours in a forced colours mode, such as Windows high contrast. Use none sparingly, for things like colour swatches whose colours carry meaning, and pair it with @media (forced-colors: active) styles of your own.

print-color-adjust

Whether the browser may change an element's colours to suit the output device, for example by leaving out background colours and images when printing to save ink. exact asks it to keep them.

color-adjust Deprecated

An older name for print-color-adjust, kept as a shorthand of it for compatibility. Use print-color-adjust instead.

dynamic-range-limit

Limits how bright high dynamic range (HDR) images and video may be shown, relative to the white of ordinary content. Use it to stop HDR thumbnails outshining the page around them.