CSS Gradient Generator

How to use the CSS Gradient Generator

1. Pick a gradient type: Linear for a straight blend, Radial for a glow from a point, or Conic for a sweep around a center.
2. Set the angle, or the shape and center position for radial and conic gradients.
3. Edit the color stops: change colors, positions and opacity, drag the handles along the bar, or click the bar to add a stop. Start from a preset if you like.
4. Press Copy CSS and paste the two lines into your stylesheet.

Features

• Linear, radial and conic gradients
• Unlimited color stops with position and opacity
• Drag handles on a stop bar, or use the keyboard
• Twelve presets and a random generator
• Live full-size preview over a transparency grid
• Clean CSS with a solid-color fallback

How CSS gradients work

A CSS gradient is an image the browser draws for you, so it costs no download, scales to any size without blurring and can be layered with other backgrounds. You use it anywhere an image is allowed, most often in background. Every gradient is defined by its type, its geometry and a list of color stops, each a color with an optional position.

Linear gradients

linear-gradient(135deg, #6a5cff 0%, #3fd4f0 100%) blends along a straight line. The angle sets the direction the colors travel: 0deg points up, 90deg to the right, 180deg (the default) down and 270deg to the left. Keywords such as to right or to bottom left do the same job.

Radial gradients

radial-gradient(circle at top left, #fff 0%, #6a5cff 100%) spreads outward from a point. A circle keeps the same radius in every direction, while an ellipse stretches to the box’s proportions. Radial gradients are good for soft spotlights and vignettes.

Conic gradients

conic-gradient(from 0deg at center, red, yellow, lime, cyan, blue, magenta, red) sweeps colors around a center like the hands of a clock. That makes it the natural choice for color wheels, pie charts and loading rings.

Working with color stops

Two stops at the same position create a hard line, which is how stripes and progress bars are made. Lowering a stop’s opacity lets the content behind show through, perfect for darkening the bottom of a hero image so white text stays readable.

Tips for better gradients

• Blend between colors that sit close on the color wheel. Mixing complementary colors such as blue and orange passes through a dull gray-brown in the middle; adding a third stop in between keeps the transition vivid.
• Large, subtle gradients between dark colors can show visible bands on some screens. A middle stop or slightly more contrast between the ends reduces banding.
• Keep text readable. Check the lightest and darkest parts of the gradient against your text color with the Contrast Checker.
• The generated CSS starts with a solid background line using the first color. Browsers that understand gradients override it; anything else still gets a sensible color.

Gradients pair well with depth and texture: add a shadow from the Box Shadow Generator, or place a frosted panel on top with the Glassmorphism Generator.

Frequently asked questions