Stax

CSS Gradient Generator

Build linear and radial CSS gradients visually and copy ready-to-use CSS.

0°90°180°270°360°
#6366f1
0%
#ec4899
100%
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);

CSS gradients — no images needed

Before CSS gradients, developers used background images (often 1px wide GIFs) to create color transitions. Today, the CSS linear-gradient() andradial-gradient() functions produce smooth, resolution-independent gradients that scale perfectly on any screen density.

Gradients are faster than images (no network request), fully responsive, and can be animated with CSS transitions.

Gradient angle reference

  • 0° — bottom to top
  • 45° — bottom-left to top-right
  • 90° — left to right
  • 135° — top-left to bottom-right
  • 180° — top to bottom

Tips for beautiful gradients

  • Use nearby hues — gradients between analogous colors (e.g., purple to pink) look more natural than between complementary colors.
  • Avoid muddy midpoints — if two colors create a grey or brown in the middle, add a middle stop with a brighter version of one color.
  • Subtle gradients for backgrounds — for UI backgrounds, keep the color difference small (e.g., two similar blues) for a polished look.

Frequently asked questions

What is a CSS gradient?
A CSS gradient is a smooth transition between two or more colors defined entirely in CSS — no image file needed. Gradients are defined using the linear-gradient() or radial-gradient() CSS functions and can be used anywhere a background image is accepted.
What is the difference between linear and radial gradients?
A linear gradient transitions colors along a straight line at a given angle (0° = bottom to top, 90° = left to right, 135° = diagonal). A radial gradient radiates outward from a center point in a circular or elliptical shape.
How do I use the generated CSS?
Copy the generated CSS and paste it into your stylesheet. For example: .hero { background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%); }. It works in all modern browsers without any prefix.
Can I add more than two color stops?
Yes. Click 'Add Stop' to insert additional color stops anywhere along the gradient. Each stop has a color and a position (0–100%). You can create complex multi-color gradients with as many stops as needed.
Do CSS gradients work everywhere?
Yes. linear-gradient() and radial-gradient() are supported in all modern browsers (Chrome, Firefox, Safari, Edge) without any vendor prefix. Browser support is effectively 100% for current users.

Related tools