Conic Gradients

A conic gradient is an angular gradient. Instead of sampling color along a line or by distance from a center, it samples color by the angle around a center point. The gradient rotates around that center, so it is useful for color wheels, charts, gauges, knobs, loaders, angular lighting, circular masks, and any design where direction around a point matters.

In CSS conic geometry, 0deg points upward and angles turn clockwise. gradiente uses the same convention across CSS, Canvas 2D, Canvas WebGL, and SVG.

conic-gradient(from 74deg at 50% 50% in oklch, hsl(325, 64%, 54%) 0%, hsl(30, 85%, 58%) 63%, hsl(3, 69%, 66%) 72%, hsl(208, 94%, 47%) 100%)

Conic gradient exampleOff-center OKLCH color wheelconic-gradient(from 74deg at 50% 50% in oklch, hsl(325, 64%, 54%) 0%, hsl(30, 85%, 58%) 63%, hsl(3, 69%, 66%) 72%, hsl(208, 94%, 47%) 100%)

Preview loads when it reaches the viewport.

conic-gradient(...) and repeating-conic-gradient(...) are native CSS functions, but gradiente does more than pass strings through. It parses the gradient into an internal model, normalizes it, and transforms the same model to CSS, Canvas 2D, Canvas WebGL, and SVG. The SVG target is generated as a pattern payload because SVG does not have a native conic gradient primitive.

Every preview block on this page is rendered by gradiente in four targets at once. The WebGL column is captured as a snapshot so the page does not keep many live WebGL contexts open at the same time.

gradiente integration

Use a conic gradient in your framework

Conic gradients are native CSS backgrounds, but gradiente still parses, sorts, normalizes, and transforms the same model for every renderer. Each example converts the parsed gradient with transformTo('css') and mounts the result in the framework.

ReactConicGradientPreview.tsx

What A Conic Gradient Contains

The conic gradient model has five conceptual parts:

Function name`conic-gradient(...)` or `repeating-conic-gradient(...)`. The public instance type remains `conic-gradient`; repeating is stored as config.

Start angleAn optional `from` angle that rotates where the first stop begins.

PositionA center point introduced by `at`, such as `at center`, `at left top`, or `at 35% 45%`.

InterpolationAn optional color interpolation clause such as `in srgb`, `in oklab`, or `in oklch longer hue`.

Stop listColor stops, optional percentage positions, optional double positions, and color hints around the angular sweep.

Internally, GradientConic stores config separately from stops:

type GradientConicConfig = {
  from: GradientAngleValue
  position: GradientPosition
  interpolation: {
    colorSpace: GradientColorSpace
    hue?: GradientHueInterpolation
  }
  isRepeating?: boolean
}

Stop positions are normalized numbers where 0 means the beginning of the angular sweep and 1 means the end of the sweep. In the string syntax shown by this page, those positions are written as percentages.

type GradientConicStop =
  | {
      type: 'color-stop'
      value: string
      position: number
    }
  | {
      type: 'color-hint'
      position: number
    }

What gradiente Does

For conic-gradient, gradiente handles both CSS-compatible behavior and renderer-specific output:

• Parses conic strings into a GradientConic instance.
• Stores the start angle, center position, interpolation, stops, and repeating state.
• Resolves default config values from one constructor location.
• Resolves missing stop positions.
• Normalizes keyword positions into x/y order.
• Preserves color hints as first-class stop data.
• Compacts double-position stops during serialization.
• Sorts positioned stops into a stable order.
• Draws the same internal model to Canvas 2D and Canvas WebGL.
• Generates an SVG pattern for renderers that need SVG output.
• Transforms the same model to CSS, Canvas 2D, Canvas WebGL, and SVG.

Anatomy

The full syntax has an optional configuration item followed by a required stop list:

conic-gradient(
  [from angle] [at position] [in color-space [hue-mode hue]],
  color-stop-or-hint,
  color-stop-or-hint,
  ...
)

The first comma-separated item is treated as configuration only when it contains conic config tokens. Everything after the first comma belongs to the stop list.

conic-gradient(from 74deg at 50% 50% in oklch, red 0%, 35%, blue 100%)

Conic gradient exampleStart angle, center, interpolation, color hint, and stopsconic-gradient(from 74deg at 50% 50% in oklch, red 0%, 35%, blue 100%)

Preview loads when it reaches the viewport.

That example contains:

• from 74deg: the angular sweep is rotated by 74 degrees.
• at 50% 50%: the center is placed in the middle of the paint area.
• in oklch: colors are interpolated in OKLCH.
• red 0%: the first color stop is placed at the beginning of the sweep.
• 35%: a color hint that moves the midpoint of the red-to-blue transition.
• blue 100%: the final color stop is placed at the end of the sweep.

Defaults

If conic config is omitted, gradiente uses CSS-like defaults:

conic-gradient(red, blue)

Conic gradient exampleDefault conic gradientconic-gradient(red, blue)

Preview loads when it reaches the viewport.

The class defaults are:

from: 0deg
position: center center
interpolation.colorSpace: "srgb"
isRepeating: false

Default values are omitted from toString(). That is why conic-gradient(from 0deg at center in srgb, red, blue) can serialize to the compact conic-gradient(red, blue).

Start Angle

The from angle rotates the whole gradient around its center. It does not change stop positions; it changes where the sweep begins.

90deg rotates the first stop to the right side of the box:

conic-gradient(from 90deg, red, blue)

Conic gradient exampleStart angle in degreesconic-gradient(from 90deg, red, blue)

Preview loads when it reaches the viewport.

Angles can use CSS angle units supported by the model, including deg, turn, rad, and grad.

conic-gradient(from 0.25turn, red, blue)

Conic gradient exampleStart angle in turnsconic-gradient(from 0.25turn, red, blue)

Preview loads when it reaches the viewport.

conic-gradient(from 1.5708rad, red, blue)

Conic gradient exampleStart angle in radiansconic-gradient(from 1.5708rad, red, blue)

Preview loads when it reaches the viewport.

Position

Position moves the center of the angular sweep. It always follows at.

Keyword positions use x/y keywords:

conic-gradient(at top left, red, blue)

Conic gradient exampleKeyword center positionconic-gradient(at left top, red, blue)

Preview loads when it reaches the viewport.

gradiente normalizes keyword positions into x/y order. For example, at top left serializes as at left top.

Value positions use two length-percentage values:

conic-gradient(at 35% 45%, red, blue)

Conic gradient examplePercentage center positionconic-gradient(at 35% 45%, red, blue)

Preview loads when it reaches the viewport.

You can combine from and at when the angular sweep needs both rotation and a shifted center:

conic-gradient(from 74deg at 35% 45%, #d53f96, #ef9439, #077fe9)

Conic gradient exampleStart angle with shifted centerconic-gradient(from 74deg at 35% 45%, #d53f96, #ef9439, #077fe9)

Preview loads when it reaches the viewport.

The current parser keeps positions strict: keyword positions are keyword-only, and value positions require two length-percentage tokens. Mixed CSS forms such as left 20px top 10px are not part of this model yet.

Stop List

The stop list defines what colors appear around the circle. A practical conic gradient usually has at least two color stops.

If a color stop has no explicit position, gradiente resolves it from neighboring stops. The first unresolved color stop becomes 0%; the last unresolved color stop becomes 100%; unresolved stops between known positions are distributed evenly.

conic-gradient(red 0%, yellow 40%, blue 100%)

Conic gradient examplePositioned color stopsconic-gradient(red 0%, yellow 40%, blue 100%)

Preview loads when it reaches the viewport.

Color hints are bare percentages between two color stops. They do not create a new color stop. They move the perceived midpoint of the interpolation segment.

conic-gradient(red 0%, 35%, blue 100%)

Conic gradient exampleColor hintconic-gradient(red 0%, 35%, blue 100%)

Preview loads when it reaches the viewport.

Double-position stops create hard angular sectors. A color written with two positions is stored as two adjacent color stops with the same color, then serialized back into the compact form when possible.

conic-gradient(red 0% 25%, blue 25% 50%, yellow 50% 100%)

Conic gradient exampleHard angular sectorsconic-gradient(red 0% 25%, blue 25% 50%, yellow 50% 100%)

Preview loads when it reaches the viewport.

When positioned stops are written out of order, gradiente normalizes them into a stable order. This is important for editor state, snapshots, and cross-renderer comparisons.

conic-gradient(from 74deg, red, blue 72%, yellow 63%)

Conic gradient exampleNormalized stop orderconic-gradient(from 74deg, red 0%, yellow 63%, blue 72%)

Preview loads when it reaches the viewport.

Interpolation

Interpolation controls the path between colors. It matters strongly for conic gradients because hue changes wrap around a center and are easy to notice.

The default interpolation space is srgb.

conic-gradient(in srgb, red, blue)

Conic gradient examplesRGB interpolationconic-gradient(red, blue)

Preview loads when it reaches the viewport.

Perceptual spaces such as oklab often produce smoother angular ramps.

conic-gradient(at 25% 75% in oklab, red, blue)

Conic gradient exampleOKLab interpolationconic-gradient(at 25% 75% in oklab, red, blue)

Preview loads when it reaches the viewport.

Polar color spaces can use hue interpolation modes. gradiente supports shorter, longer, increasing, and decreasing.

conic-gradient(in oklch longer hue, hsl(325, 64%, 54%), hsl(208, 94%, 47%))

Conic gradient exampleOKLCH longer hue interpolationconic-gradient(in oklch longer hue, hsl(325, 64%, 54%), hsl(208, 94%, 47%))

Preview loads when it reaches the viewport.

Hue interpolation is meaningful only for polar color spaces. If a hue mode is provided for a rectangular space such as oklab, gradiente keeps the color space and serializes the gradient without the hue mode.

Supported color spaces are:

oklab
lch
oklch
hsl
hwb
lab
srgb
srgb-linear
xyz
display-p3
a98-rgb
prophoto-rgb
rec2020

Repeating Conic Gradients

repeating-conic-gradient(...) uses the same internal gradient kind as conic-gradient(...). The prefix sets isRepeating: true in the config, while the instance type remains conic-gradient.

repeating-conic-gradient(from 45deg at 49% 45%, red 10%, 50%, blue 80%)

Conic gradient exampleRepeating conic gradientrepeating-conic-gradient(from 45deg at 49% 45%, red 10%, 50%, blue 80%)

Preview loads when it reaches the viewport.

Repeating conic gradients are useful for wheel ticks, polar charts, loading rings, angle rulers, technical overlays, radial stripes, and generated angular patterns.

Programmatic Construction

Most users should start with parse() because it gives you the same input shape used by the DSL. When you need to build a gradient directly, use GradientConic.

The constructor takes two parameters:

new GradientConic(stops, config?)

stops is required. config is optional and missing values are resolved from class defaults.

import { GradientConic } from 'gradiente'

const gradient = new GradientConic(
  [
    {
      type: 'color-stop',
      value: '#ff74f6',
      position: 0,
    },
    {
      type: 'color-stop',
      value: '#405de6',
      position: 1,
    },
  ],
  {
    isRepeating: true,
    from: {
      kind: 'angle',
      value: 45,
      unit: 'deg',
    },
    position: {
      kind: 'values',
      x: {
        kind: 'percent',
        value: 49,
      },
      y: {
        kind: 'percent',
        value: 45,
      },
    },
    interpolation: {
      colorSpace: 'oklch',
    },
  },
)

Conic gradient exampleEquivalent constructor outputrepeating-conic-gradient(from 45deg at 49% 45% in oklch, #ff74f6, #405de6)

Preview loads when it reaches the viewport.

Transforming A Conic Gradient

Every renderer target receives the same source model. That is the main point of the Core API: parse once, transform many times.

import { parse, transformTo } from 'gradiente'

const gradient = parse(
  'conic-gradient(from 74deg at 35% 45% in oklch longer hue, #ff74f6, #405de6)'
)

const css = transformTo('css', gradient)
const canvas2d = transformTo('canvas-2d', gradient)
const webgl = transformTo('canvas-webgl', gradient)
const svg = transformTo('svg', gradient)

Conic gradient exampleRenderer transformer inputconic-gradient(from 74deg at 35% 45% in oklch longer hue, #ff74f6, #405de6)

Preview loads when it reaches the viewport.

The transformer outputs have different shapes:

`css`A CSS background string. For conic gradients this is the normalized native CSS `conic-gradient(...)` or `repeating-conic-gradient(...)` string.

`canvas-2d`A paint object with `draw(ctx, width, height)`.

`canvas-webgl`A paint object with `draw(canvas, width, height)`.

`svg`An SVG pattern payload with `defs`, `url`, and serialized SVG data.

Normalization

Use format() before storing user input. It parses the string into the internal model and serializes it back to the canonical gradiente string.

import { format } from 'gradiente'

const input = 'conic-gradient(from 74deg, red, blue 72%, yellow 63%)'
const normalized = format(input)

Conic gradient exampleFormatted user inputconic-gradient(from 74deg, red 0%, yellow 63%, blue 72%)

Preview loads when it reaches the viewport.

Normalization is especially useful for conic gradients because native CSS and author input can disagree visually when stops are written out of order. gradiente parses the string, sorts positioned stops into a stable model, and then uses that model for every renderer.

Practical Checklist

Use this order when building or validating a conic gradient:

1. Choose the center with at when the sweep should rotate around a point other than the box center.
2. Choose from when the first stop should start at a specific angle.
3. Choose interpolation: srgb for simple parity, oklab or oklch for smoother ramps.
4. Add at least two color stops for useful visual output.
5. Add explicit percentage stop positions when angular sectors must survive editing.
6. Use color hints when the transition midpoint needs to move.
7. Use double-position stops when you need hard sectors.
8. Use repeating-conic-gradient(...) for ticks, stripes, or repeated angular bands.
9. Use format() before storing user input.
10. Use transformTo() for renderer output instead of trying to hand-convert the string.