[ @sdxc/u/color ]

fill-opacity

Sets the SVG fill-opacity paint property.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

import { fillOpacity } from "@sdxc/u/color";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.fillOpacity(50)`	`css({ fillOpacity: "0.5" })`
`u.fillOpacity("var(--chart-fill-opacity)")`	`css({ fillOpacity: "var(--chart-fill-opacity)" })`

Examples

Basic example

Use fillOpacity with a number from 0 to 100 to make the fill of an SVG shape see-through, leaving its stroke alone:

<svg width={240} height={64} viewBox="0 0 240 64" aria-hidden="true">
	<circle cx={32} cy={32} r={28} mix={[fill("brand"), fillOpacity(25)]} />
	<circle cx={88} cy={32} r={28} mix={[fill("brand"), fillOpacity(50)]} />
	<circle cx={144} cy={32} r={28} mix={[fill("brand"), fillOpacity(75)]} />
	<circle cx={200} cy={32} r={28} mix={[fill("brand"), fillOpacity(100)]} />
</svg>

Overlapping areas

Lower the fill opacity of overlapping shapes, like the areas of a chart, so each stays visible through the other:

<svg width={240} height={96} viewBox="0 0 240 96" aria-hidden="true">
	<path
		d="M0 96 L0 60 L60 30 L120 50 L180 10 L240 40 L240 96 Z"
		mix={[fill("brand"), fillOpacity(40), stroke("brand"), strokeWidth(2)]}
	/>
	<path
		d="M0 96 L0 40 L60 70 L120 20 L180 60 L240 30 L240 96 Z"
		mix={[fill("success"), fillOpacity(40), stroke("success"), strokeWidth(2)]}
	/>
</svg>

Using a custom value

Every scale argument also takes a raw CSS value, which passes through untouched.

u.fillOpacity("2.75rem")

Applying on a state

Wrap the call in a state utility to scope it to one selector.

u.hover(u.fillOpacity(50))

Responsive design

Wrap the call in a container query to scope it to one width.

u.at("md", u.fillOpacity(50))

Signature

u.fillOpacity(value: number | (string & {}))