Free & Private Online Browser Utility
CSS Gradient Generator: Linear & Radial Free
Design multi-stop linear, radial, and conic CSS background gradients with real-time visual controls. The designer lets you customize color stops, adjust directional angles from 0 to 360 degrees, toggle modern OKLCH perceptual interpolation, and export production-ready CSS background rules and Tailwind arbitrary classes without sending data over the network.
How to use
-
Step 1: Select Gradient Type & Angle
Choose linear, radial, or conic gradient mode and set the angle slider between 0 and 360 degrees.
-
Step 2: Configure Color Stops
Add up to six color stops, drag position percentages along the track, and fine-tune hex values.
-
Step 3: Copy CSS or Tailwind Output
Copy the CSS background rule directly to your stylesheet or use the generated Tailwind utility string.
Worked example
Input: Three-stop linear gradient at 135 degrees from blue to violet to pink
Output: background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
Linear interpolation calculated across RGB stops with percentage offsets.
Tips & limits
- Angling linear gradients at 135 degrees creates a natural diagonal flow from top-left to bottom-right.
- Using OKLCH interpolation preserves chroma across complementary colors that otherwise turn grayish in sRGB. Note: OKLCH gradient interpolation is supported in modern browsers (Chrome 111+, Safari 16.2+, Firefox 113+); declare a standard sRGB gradient fallback rule before the OKLCH rule for legacy browser compatibility.
- Radial gradients centered at 50% 50% work effectively as background hero spotlights.
Common problems
- Gradient stops appear out of order
The generator automatically sorts color stops by position percentage before rendering CSS output.
- Tailwind class contains invalid spaces
The generator replaces internal spaces with underscores to produce valid Tailwind arbitrary syntax.
- OKLCH interpolation rule fails or renders blank in older browsers
Browsers prior to Chrome 111 or Firefox 113 do not parse the 'in oklch' color interpolation modifier; provide a standard linear-gradient fallback property above the OKLCH declaration.
Frequently Asked Questions (FAQ)
What is the benefit of OKLCH interpolation in CSS gradients?
OKLCH is a perceptually uniform color space. Blending between opposing hues in OKLCH reduces the desaturated gray dead zone common in standard sRGB blending.
How many color stops can I add to a single gradient?
You can add between two and six color stops, each with its own hex color code and percentage position.
Are gradient designs uploaded to an external server?
No. All canvas previews, CSS code generation, and color calculations run locally in your web browser.