CSS Gradient Generator
Linear, radial and conic gradients with modern color blending.
Start with a preset
Or build your own below.
Preview
Generated code
Copy and paste directly into your project.
CSS
Advertisement
Banner adResponsive
CSS Gradient Generator – Linear, Radial & Conic
Design linear, radial and conic CSS gradients with up to 8 color stops, transparency and OKLCH or OKLab blending. Copy CSS, a CSS variable or Tailwind.
Related tools
What is CSS Gradient Generator?
Visual editor for CSS linear, radial and conic gradients. Add up to 8 color stops, drag them or set exact positions, change each stop's opacity, and choose the center of a radial or conic gradient. Pick the color space the browser blends in (sRGB, OKLab, OKLCH or HSL) and the code includes a fallback for older browsers. Copy plain CSS, a CSS custom property with an @supports block, or a Tailwind arbitrary value. Works with touch, mouse and keyboard.
- css gradient
- linear gradient
- radial gradient
- css background
- color
Features
What you get with CSS Gradient Generator.
Up to 8 Color Stops
Add, remove and drag stops, or set exact positions and opacity with sliders.
Linear, Radial & Conic Modes
Switch between gradient types.
Modern Color Blending
Blend in OKLab or OKLCH for smoother, more vivid transitions, with a sRGB fallback included.
CSS, Variable & Tailwind
Copy a rule, a custom property with @supports, or a Tailwind class.
Advertisement
In-feed adResponsive
Frequently asked questions
Common questions about CSS Gradient Generator.
Press Add color, or tap the bar under the preview, to insert up to 8 color points. Drag a handle to move it, or select a color and set its exact position with the slider.
Linear gradients transition colors along a straight line at a specified angle. Radial gradients radiate outward from a center point in a circular or elliptical pattern.
Select a color and lower its Opacity slider. At 0% the stop is fully transparent, which gives a fade-out. Transparent stops are written as rgb(r g b / a%) and shown over a checkerboard in the preview.
By default browsers blend gradient colors in sRGB, which can turn muddy or grey in the middle. OKLab and OKLCH blend in a perceptual space, so transitions look smoother and more vivid. Browsers that do not support the 'in oklch' syntax ignore that line, so the code also includes a plain sRGB version for them.
Select a color and give it the same position as its neighbour. The color then changes at once instead of blending. Turn on Repeat the pattern and move the last color below 100% to tile stripes.
Yes — apply the gradient to the background, then use background-clip: text and -webkit-text-fill-color: transparent. The output from this tool can be used for text gradients with that technique.
Advertisement
Mobile banner adResponsive
Comments
Share feedback, ask questions, or help others use this tool.
Join the discussion
Sign in to comment, reply, and report inappropriate content.