Media & SVG

fill

Setting the color of an SVG shape.

Class	Declarations
`fill-current`	`fill: currentColor;`
`fill:none`	`fill: none;`
`fill:transparent`	`fill: transparent;`
`fill:<color>`	`fill: <color>;`
`fill:#<hex>`	`fill: #<hex>;`
`fill:rgb(<rgb>)`	`fill: rgb(<rgb>);`
`fill:hsl(<hsl>)`	`fill: hsl(<hsl>);`

Examples

Set SVG fill color

Fill paints the interior of an SVG shape. fill-current uses its computed foreground color; the explicit stroke keeps the triangle’s outline visible in every comparison.

Set SVG fill color

The shapes and paint are explicitly authored. Fill is inherited independently of stroke; controls retain their native accessible names.

<!-- Current color · solid interior --><svg id="target" role="img" aria-label="Triangle"  width="96" height="96" viewBox="0 0 24 24"  class="block fg-blue-60 fill-current stroke-blue-60         stroke-width:1">  <path d="M12 4 20 20H4Z" /></svg>

<!-- None · no interior paint --><svg id="target" role="img" aria-label="Triangle"  width="96" height="96" viewBox="0 0 24 24"  class="block fill:none stroke-blue-60 stroke-width:1">  <path d="M12 4 20 20H4Z" /></svg>

<!-- Transparent · zero-alpha interior paint --><svg id="target" role="img" aria-label="Triangle"  width="96" height="96" viewBox="0 0 24 24"  class="block fill:transparent stroke-blue-60         stroke-width:1">  <path d="M12 4 20 20H4Z" /></svg>

Generated CSS

@layer utilities {  .fill-current {    fill: currentColor  }  .fill\:none {    fill: none  }  .fill\:transparent {    fill: transparent  }}

The last two shapes look alike here, but none means no paint while transparent is a color with zero alpha. Fill and stroke are separate properties. Declaring paint on the SVG lets its child path inherit it.

Use theme colors

The named blue alias follows the active theme; blue-60 selects one palette step. Switch the preview theme to compare the actual fill values.

Use theme colors

The shapes and paint are explicitly authored. Fill is inherited independently of stroke; controls retain their native accessible names.

<!-- Theme alias · follows the mode --><svg id="target" role="img" aria-label="Triangle"  width="96" height="96" viewBox="0 0 24 24"  class="block fill-blue stroke:none">  <path d="M12 4 20 20H4Z" /></svg>

<!-- Palette step · fixed blue-60 --><svg id="target" role="img" aria-label="Triangle"  width="96" height="96" viewBox="0 0 24 24"  class="block fill-blue-60 stroke:none">  <path d="M12 4 20 20H4Z" /></svg>

Use a theme alias when paint should adapt with the interface. Choose a numbered step when that exact palette color is intentional. The same SVG geometry is preserved in both modes.

Apply conditionally

Hover or keyboard-focus the native button to change its inherited icon fill. Its visible label remains unchanged, and print restores the current foreground color.

Apply conditionally

The shapes and paint are explicitly authored. Fill is inherited independently of stroke; controls retain their native accessible names.

<!-- Hover or focus · inherited icon fill --><button id="target" type="button"  class="inline-flex items-center gap-xs px-md py-sm         b:1px|solid|var(--color-line-base) r-sm font-md         bg-surface-base text-body fill-current         fill-current@print         fill-blue-60:hover@screen         fill-blue-60:focus-visible@screen">  <svg width="32" height="32" viewBox="0 0 24 24"    aria-hidden="true" class="block stroke:none">    <path d="M12 3 21 8v8l-9 5-9-5V8Z" />  </svg>  <span>Save palette</span></button>

The decorative icon is hidden from the accessibility tree because the button already has the name “Save palette”. The button supplies the state; the path inherits its fill through the SVG. Use stroke for outline paint.

Transforms

transform-style

Setting how children of an element are rendered in the 3D space.

Media & SVG

object-fit

Setting how the content should be resized to fit its container.