CSS Gradient Generator
Create beautiful CSS gradients with a visual editor supporting linear, radial, and conic types with OKLCH interpolation and grainy texture overlay.
How to Use
Create production-ready CSS gradients in seconds with this visual editor:
Step-by-Step Guide
- Choose a gradient type: Select Linear (directional), Radial (circular/elliptical), or Conic (angular sweep) from the type selector.
- Set the direction: For linear gradients, drag the angle dial or type a degree value. For radial and conic gradients, pick a position from the grid.
- Edit color stops: Click on the gradient bar to add new color stops. Drag existing stops to reposition them. Click a stop to select it and change its color or exact position.
- Enable extras: Toggle OKLCH interpolation for smoother color blending, add grain overlay for a textured aesthetic, or enable repeating for pattern effects.
- Copy the code: The CSS output updates in real time. Click the copy button to grab the complete CSS property, ready to paste into your stylesheet.
Quick Start with Presets
Scroll through the preset gallery to find a starting point. Each preset applies a curated color combination that you can further customize. The Random button generates an entirely new gradient with 2-4 stops in a random configuration.
About This Tool
How CSS Gradients Work
CSS gradients are images generated by the browser's rendering engine rather than loaded from a file. The CSS specification defines three gradient functions: linear-gradient(), radial-gradient(), and conic-gradient(). Each function accepts a direction or shape parameter followed by a series of color stops with optional position values. The browser interpolates between these stops to produce a smooth color transition.
Linear gradients transition colors along a straight line defined by an angle. 0 degrees points upward, 90 degrees points rightward, and 180 degrees points downward. Radial gradients radiate outward from a center point in either a circular or elliptical shape. Conic gradients sweep colors around a center point, similar to the color wheel in a graphics editor.
OKLCH vs. sRGB Color Interpolation
Traditional CSS gradients interpolate colors in the sRGB color space. This can produce unexpected muddy or desaturated zones when transitioning between certain color pairs, particularly complementary colors like blue and orange. The OKLCH color space (Oklab Lightness, Chroma, Hue) is perceptually uniform, meaning equal numerical changes produce equal perceptual changes. Gradients in OKLCH maintain vibrant saturation throughout the transition.
To use OKLCH interpolation, add in oklch after the gradient function name. Browser support as of March 2026: Chrome 111+, Firefox 113+, Safari 16.2+. This tool generates both standard and OKLCH variants so you can include the standard syntax as a fallback.
The Grainy Gradient Technique
Grainy or noisy gradients have become a hallmark of modern web design since 2023. The technique overlays an SVG noise filter on top of a gradient using the feTurbulence SVG primitive. The fractalNoise type with a base frequency around 0.65 produces organic grain that breaks up the mathematically smooth gradient bands. Because the filter is generated as an inline SVG data URI, it requires zero network requests and adds negligible weight to the page.
Related Tools
- Color Picker — Extract precise color values to use in your gradient stops.
- Contrast Checker — Verify text readability when overlaying content on gradient backgrounds.
- SVG to CSS — Convert SVG icons to CSS data URIs alongside your gradient code.
- Favicon Generator — Create favicon assets to complement your gradient-based design.
- CSS Box Shadow — Pair gradients with layered shadows for polished elevation effects.
Why Use This Tool
Faster Than Design Tools
When you need a gradient for a web project, going through Figma or Sketch adds an export step. This tool outputs copy-ready CSS directly. The live preview matches exactly what the browser will render, eliminating guesswork.
Modern OKLCH Support
Most gradient generators still output only sRGB syntax. This tool generates OKLCH interpolation code, giving you access to the smoother, more vivid color transitions that modern browsers support. The dual output means you get a progressive enhancement path built in.
Grain Without Images
The SVG feTurbulence noise filter produces the grainy texture effect without any image file. This saves an HTTP request and keeps your page lightweight. The generated code is self-contained CSS that works everywhere SVG filters are supported.
Completely Offline
All gradient calculations run in your browser. No data is sent to any server. You can use this tool on an airplane, behind a firewall, or anywhere else without a network connection.