{ CSS Gradient Generator }

// build linear and radial gradients visually

Build linear and radial CSS gradients visually. Add color stops, adjust positions and angles, preview live, then export clean CSS — free, no signup required.

// LIVE PREVIEW
// COLOR STOPS
// GENERATED CSS
// GRADIENT TYPE
// LINEAR OPTIONS
ANGLE
°
DIRECTION
REPEATING
// SELECTED STOP Click a stop handle
Click a stop on the track to edit it.
// PRESETS

HOW TO USE

  1. 01
    Choose a gradient type

    Select Linear, Radial, or Conic from the type tabs. Each mode has its own set of configuration options on the right panel.

  2. 02
    Edit color stops

    Click any handle on the gradient track to select it and adjust its color and opacity. Drag handles to reposition stops. Click "+ ADD STOP" to add more.

  3. 03
    Export CSS

    The generated CSS updates in real time. Click "Copy CSS" to copy the full background declaration, or "↓ Download" for a .css file.

FEATURES

Linear Gradients Radial Gradients Conic Gradients Draggable Stops RGBA Colors Repeating Mode Presets CSS Export

USE CASES

  • 🎨 Hero section backgrounds and banners
  • 🎨 Button hover effects and overlays
  • 🎨 Card gradients and frosted glass looks
  • 🎨 Conic gradients for pie charts and spinners

WHAT IS THIS?

The CSS Gradient Generator is a visual, browser-based tool for building all three CSS gradient types: linear, radial, and conic. Drag color stops, fine-tune positions, and choose angle or shape — all with a live preview that shows exactly what the exported CSS will look like.

RELATED TOOLS

🌑 Box Shadow ⚡ Flexbox Generator ✨ Filter Generator 🎞 Animation Generator ◎ Border Radius

FREQUENTLY ASKED QUESTIONS

What is a linear gradient?

A linear gradient transitions colors along a straight line at a specified angle. The linear-gradient() function takes an angle and a list of color stops, blending smoothly between each stop.

What is a radial gradient?

A radial-gradient() radiates colors outward from a central point in either an ellipse or circle shape. You can control the center position, shape, and how far the gradient extends using size keywords.

What is a conic gradient?

A conic-gradient() sweeps colors around a central point like a color wheel or pie chart. Unlike linear or radial, color stops are positioned angularly (in degrees) rather than linearly.

What does "repeating" mode do?

The repeating-linear-gradient() and repeating-radial-gradient() variants tile the gradient pattern by repeating the defined color stops. This creates striped or patterned backgrounds from a small stop sequence.

Can I use transparent color stops?

Yes. Each color stop supports full RGBA — set the alpha channel to 0 for fully transparent, or any value in between for semi-transparent. This is useful for overlays and fade effects.

Is the exported CSS production-ready?

Yes. The generated code uses standard background shorthand — no vendor prefixes are needed for modern browsers. All major browsers have supported these gradient functions for years.

CSS Gradient Generator — Build Linear, Radial & Conic Gradients

CSS gradients are one of the most powerful tools in a front-end developer's toolkit. With no images required, gradients can add depth, texture, and visual interest to any element — and they scale perfectly at any resolution. This generator covers all three gradient types in one visual interface.

Linear Gradient Tips

The angle in linear-gradient() follows a clockwise compass convention starting from the top: 0deg goes from bottom to top, 90deg goes left to right, and 135deg goes from the top-left to the bottom-right. You can also use keywords like to right or to bottom left instead of angles.

Radial Gradient Tips

The farthest-corner size (default) stretches the gradient to reach the farthest corner of the element. Using closest-side creates a tighter gradient that stops at the nearest edge, useful for spotlight effects. Combine with percentage positions to offset the focal point for dramatic lighting.

Conic Gradient Use Cases

☕