You pick two brand colors, open an online gradient generator, and drag the stops into place. The CSS output looks right. What you did not see was the analytics call logging your hex values, the session cookie recording which palette you tested, or the ad network building a profile around the product colors you have not shipped yet. That transmission happens silently on dozens of “free” gradient tools, and for anyone working with proprietary brand assets or unreleased design systems, it is a real exposure.
This guide walks through building CSS gradients entirely in your browser using a visual editor that never sends your data anywhere. You will understand when to use linear, radial, and conic gradients; how color stops, hint positions, and hard stops control the blend; why the color space behind the interpolation matters more than the colors themselves; and how to export the result as plain CSS, a Tailwind arbitrary value, or a block of CSS custom properties. Your design data stays on your machine from start to finish.
Who This Tool Is for and When Client-Side Gradients Matter
Designers handling proprietary brand palettes
Brand guidelines exist because color choices are strategic. Handing your primary and accent hex values to a third-party server, even one that claims to be “client-side,” introduces risk you did not account for. Designers working on rebrands, product launches, or agency engagements should treat color values with the same care they give to unreleased wireframes.
Frontend developers in restricted build environments
Some development machines have no internet connection. Air-gapped environments, secure CI workstations, and corporate networks with strict egress policies all break tools that depend on external scripts or CDN resources. A browser-based gradient generator that runs offline after the initial page load fits these constraints cleanly.
Anyone working with unreleased product palettes
New product UI colors stay confidential until launch. When you generate a gradient preview on a server you do not control, you hand your color direction to someone else before your announcement. CapyToolkit’s free browser-based gradient editor processes every gradient locally, so the only place your values exist after you close the tab is your clipboard.
No account, no install, no network call after the page loads. Drag your stops into place, rotate the angle dial, and copy production-ready CSS. Nothing else sits in the loop: no middleware, no tracking pixels, no server logging your design tokens.
Three Gradient Types and When Each One Is the Right Tool
Linear gradients
Drawing a straight transition between color stops along a single axis, linear gradients give you precise directional control. By adjusting the axis angle, you set the sweep: 0 degrees flows bottom-to-top, 90 degrees flows left-to-right. That predictable geometry makes linear gradients the default for full-width background fills, hero section overlays, and button hover states where the directional sweep carries visual weight. When your design needs a clean fade from one edge of an element to the opposite edge, linear is almost always the right starting point.
Radial gradients
Radial gradients expand outward from a focal point, creating concentric rings of color that dilute toward the edges. This behavior maps naturally to spotlight effects, vignette darkening around a photograph, and soft circular surface highlights on cards or tiles. The shape parameter toggles between circle and ellipse; the center position controls where the focal point sits within the element. For a glow that feels anchored to a specific spot rather than sweeping across the surface, radial is the type to reach for.
Conic gradients
Rotating color around a center point like the sweeping hands of a clock, conic gradients produce a clean angular sweep that no other gradient type can replicate. This rotational behavior makes them the natural fit for pie charts, color wheels, starburst patterns, and any decorative element that requires a spinning hue instead of a linear flow. Building a three-section pie at 40%, 35%, and 25% takes nothing more than three hard-stop pairs in a single conic rule; no SVG, no JavaScript charting library, no extra dependencies.
Picking the right type comes down to geometry, not color. Whether your design needs color flowing along a vector, radiating from a focal point, or sweeping around an axis determines which type to reach for before you place a single stop. Once the geometry is set, the real control lives in how those stops blend, where the midpoint falls, and whether each transition stays smooth or snaps to a hard edge.
Color Stop Controls That Change Everything
Interpolation and hint stops
Between every two color stops, your browser blends the colors using straight-line interpolation in sRGB space by default. Red at position 0% and blue at position 100% produce a 50/50 mix of the two at the mathematical midpoint. That midpoint position is not fixed. A hint stop, which is a percentage value with no color of its own, tells the browser to reach the halfway blend at a different position. Place a hint stop at 30% and the blend completes most of its transition in the first third of the gradient, leaving the remaining two-thirds mostly settled on the end color. Hint stops give you asymmetric blends without adding extra colors to the gradient.
Hard stops for sharp edges
Place two color stops at the exact same percentage position and the blend collapses to zero width. The browser renders the first color up to that position and starts the second color immediately after. Hard stops produce sharp geometric edges instead of smooth transitions. Stripes, flag effects, and data visualization segments all rely on this technique. Click the gradient track to add a stop, drag its position to match an existing stop exactly, then assign it a different color. The preview updates in real time, so you see the sharp edge form as soon as the positions align.
The builder accepts HEX, RGB, HSL, HSV, OKLCH, and CSS named colors directly in the stop field. Type oklch(0.65 0.2 250) into any stop and it converts to HEX for storage while preserving the perceptual value you specified. This means you can work in a perceptually uniform color space from the moment you start picking colors, even if the output CSS uses standard hex notation.
Why Color Space Matters in Gradient Midpoints
The brightest saturated blue transitioning to the brightest saturated orange should, in theory, pass through vivid intermediate hues. In practice, default sRGB interpolation averages the raw channel values. Red at 255, green at 0, blue at 0 blends toward red at 255, green at 165, blue at 0, and the midpoint lands near a muddy grey-brown. Every complementary pair that sits opposite each other on the color wheel suffers from this problem. The result looks desaturated right where you expect the most energy.
While sRGB interpolation drains the energy out of complementary blends, CSS Color Level 4 offers a direct fix. Writing linear-gradient(in oklch, blue, orange) routes the blend through the OKLab color space, which models how human vision perceives differences in hue, saturation, and lightness. Consequently, the midpoint stays vivid instead of collapsing into mud. The MDN guide to CSS Color Module Level 4 documents the full set of interpolation options, including in oklch, in lch, and in lab. OKLCH interpolation in CSS gradients produces a result that looks like what you expected when you picked the two endpoint colors in the first place.1
OKLCH represents color in three intuitive dimensions: lightness, chroma (saturation), and hue angle. Because these dimensions map closely to how humans perceive differences, the interpolation path between two OKLCH colors stays perceptually even.2 A shift from cool blue to warm yellow at constant high chroma passes through vivid greens and oranges rather than the dull grey corridor sRGB produces. The practical upshot is that you can pick two endpoint colors, rely on the midpoint, and spend your time on layout instead of fighting the blend. The engineering blog post OKLCH in CSS: why quit RGB and HSL walks through the visual differences between sRGB and OKLCH gradient paths with side-by-side examples.3
Choosing a perceptually uniform color space is a structural design decision, not a cosmetic preference. Gradients with muddy grey midpoints read as broken to anyone trained in color, and the perceptual fix makes the output professionally usable without manual stop tweaking.
The CSS Angle Coordinate System
CSS angles start at 12 o’clock and increase clockwise: 0 degrees points straight up (bottom-to-top, or to top), 90 degrees points to the right (left-to-right, or to right), and 180 degrees points straight down (top-to-bottom, or to bottom). That convention differs from the standard mathematical unit circle, which starts at the right-hand horizontal axis (3 o’clock) and rotates counter-clockwise. The MDN reference for linear-gradient() confirms that 0deg is equivalent to to top, with increasing values rotating clockwise.4 Developers who expect 0 degrees to produce a horizontal gradient get the wrong result on their first attempt.
Directional keywords offer a more readable alternative: to right equals 90 degrees, to bottom right equals 135 degrees, to bottom equals 180 degrees. The builder’s angle dial outputs numeric degrees. If your codebase prefers keyword syntax, substitute the equivalent keyword after copying. For background accents in design layouts, 135 degrees is the most commonly used diagonal value. It produces a top-left-to-bottom-right sweep that reads as a natural light direction, not an arrow pointing at something. Negative angles rotate counter-clockwise, so -45 degrees yields the same result as 315 degrees. The builder’s dial supports both ranges, which means you can match any reference value regardless of which direction the original author measured from.
Output Formats: CSS, Tailwind, and Design Tokens
The same gradient can serve three different contexts, and retyping the stops for each one wastes time and introduces errors. The output panel switches between three formats without changing any stop positions or colors. To see how the exact same stops render in each context, here is a direct comparison:
| Format | Output pattern | When to use it |
|---|---|---|
| CSS | background: linear-gradient(135deg, #e66465, #9198e5) | Vanilla stylesheets, email templates, any context with plain CSS |
| Tailwind | bg-[linear-gradient(135deg,_#e66465,_#9198e5)] | JSX templates, React/Next.js/Vue/Svelte components using Tailwind v3 or v4 |
| Vars | --g-1: #e66465; --g-2: #9198e5; --gradient: linear-gradient(135deg, var(--g-1), var(--g-2)) | Design token files, component libraries, any project that manages colors as custom properties |
Tailwind’s arbitrary value syntax replaces spaces with underscores inside the brackets. The builder handles this conversion automatically, so you paste directly into a class attribute without manual editing. For Tailwind CSS v4 specifically, the native bg-linear-to-r utility set offers a more structured approach when your gradient uses palette tokens rather than arbitrary hex values. The full Tailwind v4 gradient utility reference covers the migration from v3 and the new syntax.5
The Vars output names each stop --g-1, --g-2, and so on. Rename these tokens to match your design system’s naming convention before pasting into a token file. The --gradient variable references those tokens, so changing a single stop color later requires updating one custom property rather than hunting through stylesheet rules.
Example Use Cases You Can Build Right Now
The builder loads with presets that demonstrate real patterns you can adapt. A pie chart uses a conic gradient with hard-stop pairs: blue from 0% to 40%, orange from 40% to 75%, green from 75% to 100%. Three stop pairs, one gradient rule, no SVG.
Gradient text is another immediate technique. Set a gradient as the element’s background-image, then apply background-clip: text with color: transparent.6 The text fills with the gradient instead of a flat color. Add a transparent fade stop at one end for a smooth cutoff rather than a hard edge at the container boundary.
Loading spinners use repeating-conic-gradient rotated with a @keyframes rule.7 Define the gradient with hard stops at alternating light and dark segments, apply a rotation animation, and the indicator spins in pure CSS. No JavaScript animation library, no inline SVG with a transform attribute, no additional HTTP requests. The spinner works even when your bundle fails to load.
Each of these presets is a working starting point. Change the stop colors, adjust the angles, swap the gradient type to match your design, and copy the output. All three patterns run on pure CSS alone: no extra dependencies, no JavaScript bundles, no failure points outside the browser’s own rendering engine.
Move Your Gradient Workflow Offline
Every gradient calculation described in this post happens locally in your browser. After the page loads, you can disconnect from the internet and the tool keeps working: adding stops, rotating angles, switching output formats, all of it. There are no ads, no trackers, no analytics calls logging your color choices. Your brand palette never touches a server you do not control.
The three output formats cover vanilla CSS, Tailwind JSX, and design token files, so the gradient you build drops directly into whatever stack you work in. Build linear, radial, and conic CSS gradients visually in your browser with the Gradient Builder that exports production-ready CSS without touching a server. Drag the stops, pick the format, copy the result. Nothing else to it.
- 1.
Tab Atkins Jr., Chris Lilley, and Lea Verou, “CSS Color Module Level 4,” W3C Candidate Recommendation Draft, w3.org, May 2026. https://www.w3.org/TR/css-color-4/
- 2.
“oklch(),” CSS-Tricks Almanac, css-tricks.com, accessed June 2026. https://css-tricks.com/almanac/functions/o/oklch/
- 3.
“Access more colors and new spaces,” Chrome for Developers, google.dev, 2023. https://developer.chrome.google.cn/docs/css-ui/access-colors-spaces
- 4.
“linear-gradient(),” CSS-Tricks Almanac, css-tricks.com, accessed June 2026. https://css-tricks.com/almanac/properties/l/linear-gradient/
- 5.
“background-image,” Tailwind CSS Docs, tailwindcss.com, accessed June 2026. https://tailwindcss.com/docs/background-image
- 6.
“CSS Backgrounds and Borders Module Level 3,” W3C Recommendation, w3.org, July 2024. https://www.w3.org/TR/css-backgrounds-3/#background-clip
- 7.
“CSS Conic-gradient Spinner with Radial Mask,” Animation Patterns, animationpatterns.art, accessed June 2026. https://animationpatterns.art/animations/conic-gradient-spinner/
