CSS Gradient Builder

Linear, radial, and conic: when to use each

Choosing the right gradient type is a geometry decision, not a color one. Linear gradients draw a straight transition between stops along a single axis, making them the standard choice for background fills, hero sections, button hover states, and text overlays where direction carries visual weight. Radial gradients expand outward from a focal point, which is a behavior that suits spotlight effects, vignette darkening around the edges of a photograph, and soft circular highlights on cards or surfaces.¹

Conic gradients rotate color around a center point, the way a clock face sweeps through hours. That rotation makes them the natural tool for pie charts, color wheels, starburst patterns, and any decorative element where color should appear to spin rather than flow in a line. For most backgrounds and overlays, start with linear. When you need a glow or vignette centered on a specific point, switch to radial. When the effect requires rotation, conic is the right type.¹

Choosing by geometry and intent

A quick way to decide is to ask what the gradient is supposed to mimic. A smooth wash across a hero section reads as directional light, which calls for a linear gradient. A soft pool of light behind a subject reads as radiation from a point, so radial is the better fit. A ring of distinct color segments reads as rotation around a hub, which is the signature behavior of a conic gradient. Once you name the visual behavior, the gradient type follows directly, and you can always switch types later without losing your color stops.

Mesh gradients: layering radials

A mesh gradient, the kind that blends several color sources across a whole surface in two dimensions, has no single CSS function. The three functions each draw along one dimension: linear draws along an axis, radial draws from one point, and conic draws around one center. The technique that produces a mesh is layering multiple radial gradients, each with its own transparent fade, as comma-separated backgrounds on one element. The topmost layers read through their own transparent regions, and the overlapping pools of color add up to the two-directional blend a mesh implies.

Each radial layer builds exactly like a single gradient here: choose the center, set the stops, use the per-stop opacity for the fade toward nothing, and copy the CSS. The boundary is one gradient function per output, so assembling the layered declaration is the hand edit, with each layer's function copied from its own build. The first function in the comma list paints on top, so order the layers deliberately and let the transparent stops reveal what sits beneath. The mesh emerges from the stack rather than from any single function.

How CSS color stop interpolation actually works

Between every two color stops, CSS gradients interpolate through the active interpolation color space. By default, that space is Oklab unless you specify another method such as in srgb or in oklch. At the midpoint between a red stop at 0% and a blue stop at 100%, the rendered color is the midpoint of the two colors in that active space. That midpoint is not fixed; you can shift it by inserting a hint stop, which is a position-only value with no color of its own. A hint stop at 30% tells the browser to reach the midpoint of the blend at 30% of the distance between the two color stops rather than at the mathematical center.²³

One honest note about hint stops and this editor. Every stop in the builder carries a color and an opacity, so a position-only hint stop cannot be expressed here at all. Shifting the blend inside the tool means inserting a color stop near the desired midpoint, which is exactly what the track's click-to-add does, and nudging its color toward the side you want to favor. When a true midpoint marker is the goal, the hint syntax itself is a hand edit on the copied output: add the bare percentage at the point where the blend should reach its midpoint, and the browser honors it.

Hard stops and sharp transitions

Place two stops at the same percentage position and the blend collapses to zero width. Your browser renders the first color up to that point and starts the second color immediately after with no transition between them. Hard stops produce sharp edges that look like geometric shapes rather than gradients. This is useful for striped patterns, flag effects, and data visualization fills where each segment should be a flat color. Drag a new stop to match an existing stop's position exactly, assign it a different color, and you have a hard stop.⁴

Repeating gradients and stripes

Stripes and tiling call for the repeating forms of each function. A repeating gradient tiles the stop sequence along the gradient line or around the center instead of stretching one pass edge to edge, and the repetition length is the distance the stops span, so pulling the last stop closer tightens the period.² Paired with the hard-stop pairs from the previous section, a two-color list becomes crisp stripes: the repeat period sets the stripe width, and the hard stops keep each band flat with no blending between bands. Awnings, progress fills, and hazard bands all reduce to that one combination.

Every copy mode here emits the non-repeating functions, so the repeating form is a hand edit after copying. Replace the function name in the copied output with repeating-linear-gradient() or repeating-conic-gradient() and the stop list carries over unchanged, with the positions you built now setting the tile period. The preview above keeps showing one pass, so expect the page to look plainer than the pasted result: the repetition only happens once the rule lands in a stylesheet. Nothing else in the output changes, which keeps the edit small and reversible, whichever of the three output formats you copied.

Why color space matters in gradients

Gradients between complementary colors often produce a dull, grey midpoint that looks muddy on screen. Blue transitioning to orange passes through a zone where the raw RGB channels mix into a washed-out neutral. This happens because standard sRGB interpolation treats the channels as independent numbers rather than as perceptual relationships between hues, so the blend ignores how the human eye compares colors.

Specifying the interpolation space

CSS Color Level 4 addresses this with the in oklch interpolation syntax. Writing linear-gradient(in oklch, blue, orange) routes the blend through the OKLab color space, which models how the human eye actually perceives color differences, and the midpoint stays vivid rather than going grey.³ The color stop input field on this builder accepts OKLCH values natively: type oklch(0.65 0.2 250) and the stop stores the sRGB hex equivalent of that color, the same hex conversion this page's FAQ describes. The output CSS uses HEX, and the copy panel never emits an interpolation modifier, so in oklch is a hand edit inside the copied function's parentheses. Once present, the blend passes through the perceptual space even between hex stops.

The CSS angle coordinate system

CSS angles start at the top of the element and increase clockwise. At 0deg, the gradient flows from bottom to top. At 90deg, it flows from left to right. At 180deg, it flows from top to bottom. Conversely, the mathematical unit circle starts at the right-hand axis and increases counter-clockwise, which is the opposite convention. This catches developers who expect 0deg to produce a horizontal gradient.

CSS also accepts directional keywords as shorthand: to right (90deg), to bottom (180deg), and to bottom right for a diagonal. The angle dial on this builder outputs numeric degrees; if your codebase uses keyword syntax, substitute the equivalent keyword after copying. For diagonal directions, 135deg is the most commonly used value for design layouts because it produces a natural top-left to bottom-right sweep that reads as a background accent rather than a directional arrow.

What conic gradients are actually useful for

Building a pie chart with CSS requires no SVG and no JavaScript. Conic gradients with hard stops at the right percentages produce flat color segments that function as chart slices. A three-section pie with 40% blue, 35% orange, and 25% green uses three hard-stop pairs: blue from 0% to 40%, orange from 40% to 75%, green from 75% to 100%. The Pie Chart preset in this builder demonstrates this pattern, ready to adapt to your own percentages.⁵

Sweeping through all hue values produces a full-spectrum color wheel, useful as a picker background or a decorative ring. Furthermore, repeating-conic-gradient, a variant the browser supports natively, tiles the stop pattern repeatedly around the center, creating checkerboard, pinwheel, and starburst patterns from a single gradient rule. Spinner animations are another practical application, and the mechanism matters: a keyframe rule cannot directly animate the gradient's internal from angle, so the pure-CSS version applies the gradient to an element and rotates the whole element with a transform keyframe, producing a loading indicator that runs in CSS with no JavaScript at all.⁵

Animating a gradient's internals

Plenty of motion around a gradient costs nothing. The element's transform and opacity are animatable properties, so a gradient surface can spin, drift, or breathe while the gradient value itself stays perfectly still. Spinning the element rotates the whole painted surface, pulsing an overlay fades it against its backdrop, and crossfading two gradient layers on hover swaps their opacities. Each of these needs an ordinary keyframe rule and nothing exotic, and each leaves the gradient function untouched. For a conic spinner this is the whole mechanism: the gradient paints the ring once, and the rotation carries the motion.

Values inside the gradient function are a different story. Angles, stop positions, and colors are not animation targets on their own, and the technique that changes that is registering a custom property with @property and building the gradient from that variable, which makes the registered value animatable through an ordinary keyframe rule.⁶ This builder outputs plain functions, so the registration step is a hand edit after copying: declare the typed custom property, reference it where the changing value sits, and the keyframe can then drive it. A progress bar that sweeps its stop position, for instance, is exactly this pattern.

Why a local tool beats online generators

Online gradient generators vary, but many depend on remote scripts, collect analytics about which presets you use, or stop working the moment the connection drops. For design work involving brand palettes or unpublished product colors, that uncertainty matters because a leaked palette can reveal a rebrand or a product launch before the team is ready to announce it to the public. CapyToolkit runs every gradient calculation in your browser. No request leaves your machine after the page loads, and the tool continues working on an airplane, in a coffee shop with bad Wi-Fi, or on an offline development machine behind a restrictive corporate firewall.

Privacy and offline reliability

When you build gradients locally, the colors you pick never travel over the network. This matters beyond security. It means the tool behaves the same way on a fast office connection and on a spotty train hotspot, with no loading spinners or failed requests interrupting your workflow. The page loads once and then runs entirely on your machine, so there is no dependency on an external service staying online.⁷

For teams working with unreleased brand colors or client palettes under NDA, keeping that data local removes the risk of it passing through a third-party logging service. There is no account to create, no analytics call reporting which presets you opened, and no clipboard monitor watching what you build. Your gradient data stays on your device for the entire session and is gone when you close the tab, with no server-side record to leak or subpoena. This is why many design systems teams prefer a local inspector over a hosted generator when building palettes that have not yet been made public.

Multiple output formats from one gradient

Output format is the other limitation of most generators. They typically produce a single CSS string in RGBA format, and your gradient still needs to be adapted for Tailwind, converted into design tokens, or split into CSS custom properties before it fits a real project. The output panel here handles all three formats directly: a plain CSS background property for vanilla stylesheets, a Tailwind arbitrary value class ready to paste into JSX, and a custom property block you can drop into a design token file. Switching between formats does not change your underlying gradient. It changes only how that gradient is expressed, so you can copy the right syntax for whichever context you are working in. Keeping all three outputs in sync from a single editor also means you never have to manually reformat the same gradient when moving it between a prototype and a production stylesheet.⁸

One copied value serves a destination most generators never mention: the text itself. Clipping the background to the glyph shapes fills a heading with your gradient instead of painting behind it. Keep the background: value exactly as this tool copied it, add background-clip: text, and make the text color transparent so the gradient shows through the letterforms.⁹ Those two hand edits are the whole recipe; every stop, angle, and opacity decision you made carries over untouched. A pair that reads well as a background usually reads well as type, but check the result against small sizes before shipping, because fine letterforms lose gradient detail faster than a wide panel does.