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.

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.²³

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.²

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. Consequently, 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) directly and the stop is set to that exact perceptual value. The output CSS uses HEX by default, but the in-browser rendering can take full advantage of OKLCH precision when you paste the output into a stylesheet that specifies the interpolation mode.³

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: rotate the from angle with a @keyframes rule to spin the gradient around its center point, producing a loading indicator that runs in CSS with no JavaScript at all.⁵

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.⁷