CSS Gradient Generator

Create beautiful CSS gradients visually with live preview. Linear, radial, and conic gradients.

%
%

Frequently Asked Questions

What is the difference between linear and radial gradients?

Linear gradients transition colors along a straight line (top to bottom, left to right, or any angle). Radial gradients radiate from a central point outward in a circular or elliptical pattern.

Can I use this with Tailwind CSS?

Yes, the tool generates standard CSS that works with Tailwind's @apply directive or inline styles. For Tailwind classes, use bg-gradient-to-r and similar utilities.

How do I add multiple color stops?

Click 'Add Color Stop' to insert intermediate colors. Adjust position sliders to control where each color appears (0–100%).

CSS Gradient Types

TypeCSS functionTransition pattern
Linearlinear-gradient()Along a straight line at any angle
Radialradial-gradient()From center outward in a circle or ellipse
Conicconic-gradient()Around a center point (pie-chart pattern)
Repeating linearrepeating-linear-gradient()Tiles the gradient pattern infinitely
Repeating radialrepeating-radial-gradient()Concentric rings pattern

Understanding Color Stops

A color stop defines a specific color at a specific position (0% to 100%) along the gradient axis. You can add as many stops as needed. Without an explicit position, the browser spaces them evenly.

/* Two-stop gradient */
background: linear-gradient(to right, #3b82f6, #8b5cf6);

/* Three-stop with explicit positions */
background: linear-gradient(135deg,
  #ef4444 0%,
  #f97316 50%,
  #facc15 100%
);

/* Hard stop (sharp color boundary, no blend) */
background: linear-gradient(to right,
  #3b82f6 50%,
  #8b5cf6 50%
);

Design Use Cases

  • Hero backgrounds — full-viewport gradients as page headers create depth without loading an image.
  • Button hover states — a subtle gradient gives buttons a polished 3D look on interaction.
  • Text gradients — apply via background-clip: text and -webkit-text-fill-color: transparent.
  • Card overlays — a dark-to-transparent gradient over a photo ensures white text is always readable.
  • Progress bars — a conic gradient makes it trivial to build a circular progress indicator in pure CSS.