CSS Gradient Generator
Design smooth linear, radial, and conic CSS gradients visually. Fine-tune color stops, angles, and modern OKLab/OKLCH interpolation, then copy ready-to-use CSS code.
Live Preview
Color Stops
Configure positions and colors across the gradient (min 2, max 8).
Curated Presets
Gradient Controls
Modern browsers support perceptual spaces like OKLab to avoid muddy middle gray zones during transitions.
CSS Output
background-image: linear-gradient(135deg, #67e8f9 0%, #14b8a6 52%, #0f1d3a 100%);How Our CSS Gradient Generator Works
Create custom multi-stop CSS backgrounds in three simple steps.
Choose Gradient Type & Angle
Select Linear, Radial, or Conic mode, enable repeating patterns if needed, and set your direction angle or focal center.
Customize Color Stops
Add up to 8 color stops, adjust percentage positions, and switch between standard sRGB and vibrant OKLab/OKLCH blending.
Copy Production CSS
Preview the gradient on sample UI cards and copy the complete CSS declaration in one click.
Key features
Everything you need to craft modern, high-DPI vector backgrounds in CSS.
Linear, Radial & Conic Modes
Build directional hero backdrops, radial spotlight glows, conic sweeps, and repeating stripe patterns from one visual editor.
OKLab & OKLCH Blending
Eliminate muddy gray mid-tones between contrasting hues using modern CSS Color 4 perceptual interpolation spaces.
Browser-Local Processing
Your files are processed directly in your browser and are not uploaded to Pinatool's servers.
Frequently Asked Questions
Common questions about gradient syntax, interpolation spaces, and performance.
What types of CSS gradients can I generate?
You can create linear gradients (along a direction line or angle), radial gradients (radiating outward from a center point in circle or ellipse forms), and conic gradients (rotating color transitions around a center point), as well as repeating versions of each type.
How do color stops and positions work?
A color stop marks a specific color and percentage position along the gradient line (from 0% to 100%). The browser interpolates colors smoothly between adjacent stops. You can add up to 8 stops to craft intricate multi-tone transitions.
What are modern CSS color interpolation spaces like OKLab and OKLCH?
Traditionally, browsers interpolate gradient colors using sRGB, which can cause dull, muddy "gray zones" in the middle of complementary transitions (e.g. blue to yellow). By specifying "in oklab" or "in oklch" using CSS Color 4 syntax, transitions remain perceptually uniform, brighter, and more natural.
How do I create sharp stripes or hard color boundaries?
To produce a sharp transition instead of a smooth blend, place two consecutive color stops at the exact same percentage (e.g. Stop 1: #3b82f6 at 50%, Stop 2: #ef4444 at 50%). CSS switches colors instantaneously at that threshold.
Does this generator upload or store my gradient code?
No. The gradient calculations, live rendering, and CSS code formatting run entirely client-side inside your browser. No styles, images, or colors are ever sent to an external server.
Explore More Tools
More free utilities for color harmonies, Tailwind scales, and accessible palettes.