Media & SVG
fill
Setting the color of an SVG shape.
Overview
| Class | Declarations |
|---|---|
fill:current | fill: currentColor;
|
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
Use fill:* to set the fill paint for SVG shapes.
<svg class="fill:current" viewBox="0 0 16 16" aria-hidden="true"> <path d="M8 2 14 14H2Z" /></svg>Generated CSS
@layer utilities { .fill\:current { fill: currentColor }}Use theme colors
Use color tokens when SVG paint should match the design system.
<svg class="fill:blue-60" aria-hidden="true"></svg>Use fill:transparent for shapes that should only show their stroke.
Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<svg class="fill:current fill:blue-60:hover fill:current@print">...</svg>Use stroke for outline paint.