CSS Gradient Generator

About this tool

CSS gradients power hero backgrounds, button fills and overlays, but the syntax is easy to forget. The CSS Gradient Generator builds a two-color gradient with a live preview. Choose Linear or Radial, pick Color 1 and Color 2, and use the Midpoint slider to set how far Color 1 stays solid before it blends into Color 2 — the output always lists three stops: Color 1 at 0%, Color 1 at the midpoint and Color 2 at 100%. Linear gradients take their direction from the Angle slider; radial gradients are a circle centred at 50% 50%. The CSS box holds a background-image declaration ready to copy. The angle in the output currently stops at 100deg even though the slider goes to 360, so edit the degree value in your stylesheet if you need a different direction.

Why use it

• Linear and Radial in One Tool: Switch the Type dropdown and the same two colors render as a directional fade or a centred circular glow.

• Midpoint Control: The Midpoint slider holds Color 1 solid up to a chosen percentage, which makes off-centre fades easy.

• Live Preview: The preview panel repaints on every slider or color change, so you see the gradient before copying it.

• Background-Image Ready: The output is a complete background-image declaration that pastes straight into a CSS rule or custom property.

• No Prefixes Needed: The generated linear-gradient() and radial-gradient() syntax works unprefixed in all current browsers.

How to use

1. Select Linear or Radial from the Type dropdown
2. For linear gradients, drag the Angle slider to set the direction (the output currently caps at 100deg)
3. Pick Color 1 and Color 2 with the color pickers
4. Drag the Midpoint slider to set where Color 1 starts blending into Color 2
5. Click Copy CSS to grab the background-image declaration

When it helps

• When designing a hero section background that transitions between two brand colors
• When you need a two-tone background where one color dominates before the blend starts
• When building a radial spotlight effect on a dark card or feature highlight section
• When you want a quick starting gradient to paste into a stylesheet and refine by hand

Examples

Linear, Angle 90, Midpoint 0, Color 1 #f6d365, Color 2 #fda085

background-image: linear-gradient(90deg, #f6d365 0%, #f6d365 0%, #fda085 100%);

Radial, Midpoint 20, Color 1 #4f46e5, Color 2 #1e1b4b

background-image: radial-gradient(circle at 50% 50%, #4f46e5 0%, #4f46e5 20%, #1e1b4b 100%);

Linear, Angle 120, Midpoint 45, Color 1 #3b82f6, Color 2 #f59e0b

background-image: linear-gradient(100deg, #3b82f6 0%, #3b82f6 45%, #f59e0b 100%);

Tips

• Use 135deg (top-left to bottom-right) for a natural diagonal that reads left-to-right in most layouts — it follows the same direction as reading flow
• For smoother transitions between saturated hues, add a third stop between them by editing the copied value.
• Combine two or three stacked radial-gradient() backgrounds with rgba transparency to fake a soft mesh gradient in pure CSS
• Use rgba(0,0,0,0) rather than the keyword transparent for stop colors to avoid gray desaturation artifacts during the fade in some browsers
• Set Midpoint to 0 for an even blend across the whole element; raise it to keep Color 1 solid over more of the area before the fade starts.

Frequently Asked Questions

Glossary

Linear Gradient

A CSS gradient that transitions colors along a straight line at a specified angle or direction, such as linear-gradient(to right, #ff0000, #0000ff).

Radial Gradient

A CSS gradient that emanates outward from a center point as a circle or ellipse, transitioning through specified color stops from inside to outside.

Conic Gradient

A CSS gradient where color transitions sweep around a center point like clock hands, making it suited for pie charts, color wheels, and angular patterns.

Color Stop

An individual color value at a specific position within a gradient, defined as a color plus an optional length or percentage that determines where the color peaks.

Gradient Angle

The direction of a linear gradient specified in degrees, measured clockwise from the top. 0deg is upward, 90deg is rightward, and 180deg is downward.

Mesh Gradient

A complex multi-point gradient effect where colors blend from several anchor points simultaneously. Approximated in CSS by layering multiple semi-transparent radial gradients.