CSS Gradient Generator

Create linear and radial CSS gradients visually with live preview.

{{ stop.position }}% 
{{ cssOutput }}

What Is a CSS Gradient?

CSS gradients create smooth color transitions between two or more colors. They are commonly used as backgrounds for buttons, headers, hero sections and decorative elements. Use linear-gradient() to create straight-line transitions at any angle, or radial-gradient() for circular or elliptical transitions.

Linear vs. Radial Gradient

Linear Gradient runs along a straight axis — from top to bottom, left to right, or at any angle. Radial Gradient radiates outward from a center point, either as a circle or ellipse. Both types support any number of color stops with adjustable positions.

Tips for Beautiful Gradients

  • Use a maximum of 2–3 colors for a clean look.
  • Similar hues (e.g. blue → teal) create a harmonious effect.
  • Don't place color stops too close together to avoid hard edges.
  • Test the gradient on different screen sizes.