Skip to content
↑↓ to move ↵ to open Esc to close Browse all tools

CSS Gradient Generator

Pick colors, set the angle or center and watch the gradient update. Copy clean CSS background code or a Tailwind class when it looks right.

Your gradient

Presets
deg
Color stops
CSS
 
Tailwind class
 
 
 
     
 
 
   
Runs in your browser. Your colors are not sent anywhere.
  
  
CSS gradient syntax explained
 
A CSS gradient is an image the browser draws itself, so you set it with background or background-image, just like a picture. Every gradient has two parts: the geometry, meaning the direction or the center, and a list of color stops. Each stop is a color plus an optional position in percent along the gradient.
 
 
Linear
linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%)
 
Radial
radial-gradient(circle at center, #fff6b7 0%, #f6416c 100%)
 
Conic
conic-gradient(from 0deg at center, red, yellow, red)
 
 
     
  • Linear angle: 0deg runs from bottom to top, 90deg from left to right, 180deg from top to bottom. 135deg is a diagonal from the top left to the bottom right.
    •  
  • Radial shape and position: circle keeps the same radius in every direction, ellipse stretches with the box. The at part moves the center, for example at top left for a glow from the corner.
    •  
  • Conic start angle: from 0deg starts at the top and sweeps clockwise. Ending on the same color you started with avoids a hard seam.
    •  
  • Stop positions: two stops at the same position create a hard edge instead of a blend, which is how stripes and progress bars are made.
    •  
 
Tips for smooth gradients
 
The most common problem is a gray dead zone in the middle. By default, browsers blend colors in sRGB, a color space that is not built around how people see. Mix blue and orange there and the halfway point is a dull gray. Three fixes help:
 
     
  • Interpolate in OKLCH. Adding in oklch tells the browser to travel around the hue wheel instead of straight through the middle. The colors stay bright and the lightness changes evenly. Current versions of all major browsers support it; the fallback lines keep older ones covered.
    •  
  • Add a middle stop. A third color halfway, for example a pink between purple and orange, keeps the blend lively in any browser.
    •  
  • Choose neighboring hues. Colors that sit close on the color wheel, like teal and green or orange and pink, blend cleanly even in sRGB.
    •  
 
For text on top of a gradient, check the contrast against the lightest and the darkest part, not just the middle. Very long, subtle gradients on large areas can show visible bands on some screens; a little more contrast between the stops or a faint noise texture hides them.
 
How to use the CSS gradient generator
 
     
  1. 1Start from a preset or choose Linear, Radial or Conic.
    2.  
  2. 2Set the angle with the slider or the angle chips, or pick a shape and center position for radial and conic gradients.
    3.  
  3. 3Edit the color stops: pick a color, type a hex code and move the position slider. Add up to eight stops or remove the ones you do not need.
    4.  
  4. 4Turn on OKLCH for smoother blends, then copy the CSS background code or the Tailwind class, or copy a link to share the gradient.
    5.  
   
Frequently asked questions
 
 
 What is the difference between linear, radial and conic gradients? 
A linear gradient changes color along a straight line at the angle you set. A radial gradient spreads outward from a point as a circle or an ellipse. A conic gradient sweeps around a center point like the hands of a clock, which is useful for color wheels, pie charts and spinners.
 
 Why does my gradient have a gray or muddy middle? 
Browsers mix colors in sRGB by default, and two colors from opposite sides of the color wheel, like blue and yellow, pass through a dull gray on the way. Turn on OKLCH interpolation, add a third stop with a bright color in the middle, or pick colors that are closer in hue.
 
 Does "in oklch" work in every browser? 
Current versions of Chrome, Edge, Safari and Firefox support color interpolation methods in gradients. An older browser that does not understand the line skips it completely. With the fallback option on, the code adds a solid color and a plain sRGB gradient first, so those browsers still get a gradient.
 
 How do I use the gradient in Tailwind CSS? 
Copy the Tailwind class. It puts the whole gradient into an arbitrary value, like bg-[linear-gradient(90deg,#ff7e5f_0%,#feb47b_100%)]. Tailwind turns the underscores back into spaces. For simple two or three color linear gradients you can also use the built-in bg-linear-to-r with from- and to- classes.
 
 Can I use transparent colors? 
Yes. Type an 8 digit hex code like #ff7e5f80 or an rgba() value into the hex field of a stop. The color picker itself only shows solid colors, but the gradient and the CSS keep the transparency. The preview shows a checkerboard behind see-through parts.