[ @sdxc/u/color ]
conicGradient
Builds a conic-gradient(...) value string for any background-image use.
import { conicGradient } from "@sdxc/u/color";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.conicGradient(45, "red", "blue") | "conic-gradient(from 45deg, red, blue)" |
u.conicGradient("from 45deg at top left", "red", "blue") | "conic-gradient(from 45deg at top left, red, blue)" |
Examples
Basic example
Use conicGradient with a starting angle and two or more colors to sweep colors around a center point:
<div
mix={[
bg({
image: conicGradient(
0,
"var(--ui-color-danger-500)",
"var(--ui-color-warning-400)",
"var(--ui-color-success-500)",
"var(--ui-color-brand-500)",
"var(--ui-color-danger-500)",
),
}),
circle(),
is(32),
bs(32),
]}
/>Pie charts
Place each stop with a start and an end position, like 0% 40%, to draw hard-edged slices:
<div
mix={[
bg({
image: conicGradient(
0,
{ color: "var(--ui-color-brand-500)", position: "0% 40%" },
{ color: "var(--ui-color-success-500)", position: "40% 75%" },
{ color: "var(--ui-color-warning-400)", position: "75% 100%" },
),
}),
circle(),
is(32),
bs(32),
]}
/>Rotation and center
Pass the full clause, like from 90deg at top left, to rotate the sweep and move its center:
from 90deg at top left
<div
mix={[
bg({
image: conicGradient(
"from 90deg at top left",
"var(--ui-color-brand-600)",
"var(--ui-color-warning-300)",
),
}),
fg("brand.onSolid"),
is(64),
bs(32),
...,
]}
>
from 90deg at top left
</div>Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.conicGradient(45, "red", "blue"))Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.conicGradient(45, "red", "blue"))Signature
u.conicGradient(angle: number | `from ${number}deg` | `from ${number}deg at ${GradientPosition}` | (string & {}), ...stops: GradientStop[])