Image Stroke

Preset size modifiers set the stroke width on an image. The default stroke is 1.5px white, with additional options for base (1.5px, equivalent to default), small (1px), medium (2px), large (2.5px), and extra large (3px). The image-stroke--base modifier explicitly sets the default stroke width and is useful for responsive layouts.

Image Stroke is the right tool for photos and multi-color logos that cannot be recolored. It also composes with image--adaptive, outlining the recolored shape (see Image ).

Use the image-stroke--{shade} modifier to change the stroke color, black for images on dark backgrounds. The shades are the same palette tokens the background scale uses:

• image-stroke--black and image-stroke--white.
• image-stroke--gray-10 through image-stroke--gray-75, in steps of five, plus the legacy gray-1 to gray-7 aliases.
• Ten hues (red, orange, yellow, lime, green, cyan, blue, violet, purple, pink) as a bare name such as image-stroke--red and on the same 10 to 75 steps, so image-stroke--red-40 works on a color panel.

For the shade scale and how it adapts across bit depths, see Background .

A shade modifier and a width modifier combine: image-stroke image-stroke--black image-stroke--small is a 1px black ring. Both take the bit-depth prefixes, so 2bit:image-stroke--gray-30 restyles the ring on 2-bit screens only.

A shade class also draws on its own: a lone image-stroke--black is the default 1.5px ring in black. Text Stroke differs here, where a shade class only colors a stroke that text-stroke or a width modifier applies.