CSS Gradient Maker

Key features

• Linear gradients with a 0–360° angle slider, or centered radial gradients.
• Two or three color stops — the third stop is a toggle for simpler two-color looks.
• Position sliders for stops 2 and 3, so you can compress or stretch the blend.
• Five curated presets: Sunset, Ocean, Candy, Forest and Neon.
• Randomize button that picks fresh high-saturation hues for instant inspiration.
• One-click copy of the full background: … declaration, ready to paste into CSS.

How it works

1. 1

   Pick a type

   Choose Linear or Radial from the dropdown. The angle slider only appears for linear gradients.

2. 2

   Set your stops

   Click a stop's swatch to open the color picker, and use the position sliders to move stops 2 and 3 along the gradient.

3. 3

   Add a third color (optional)

   Toggle Third color stop off for a classic two-color gradient, or on for a richer three-stop blend.

4. 4

   Copy the CSS

   The preview updates live. Copy the background declaration and paste it into any stylesheet, inline style, or design tool.

Tips for better results

• 💡Radial gradients ignore the angle — they always radiate from the center.
• 💡Stop 2's position is the fastest way to change a gradient's character: low values hug the first color, high values hug the last.
• 💡The copied code also works for gradient text with background-clip: text.
• 💡Hit Randomize first, then fine-tune the hex values manually — faster than starting from scratch.
• 💡Presets load all three stops at once and then behave like any other gradient — tweak away.

Frequently asked questions