Skip to content
ToolFarmToolFarm
Design

Gradient Generator

Build beautiful CSS gradients with a live preview.

2 min read

What this tool does

CSS gradient generator with a live preview. Pick two colors, the gradient type (linear, radial or conic) and the angle. The CSS rule appears ready to copy.

No colors yet? Start with palette generator or run any value through color converter.

What you can use it for

  • Quickly create a hero background for a landing page.
  • Generate a gradient for a button or a feature card.
  • Try color combinations before committing to a palette.
  • Ship a gradient ready for Tailwind or a theme variable.

How to use it

  1. Pick the start and end colors.
  2. Choose the gradient type: linear, radial or conic.
  3. If it's linear, adjust the angle in degrees.
  4. Copy the CSS rule or the HTML preview that appears below.

Everything runs inside your browser. No file is uploaded to any server. See more tools in this field.

Gradient presets that actually work

If you don't know where to start, try these gradients. Each one fits a concrete use and they're combinations that have been tested in the wild.

  • Sunset

    #F97316 → #EF4444 · 135°

    Warm heros, sales CTAs.

  • Citrus lime

    #A3E635 → #22C55E · 135°

    Health products, green fintech, dashboards.

  • Ocean

    #0EA5E9 → #1E40AF · 90°

    Tech, B2B SaaS, professional backgrounds.

  • Lavender

    #A78BFA → #EC4899 · 45°

    Creative branding, beauty, crypto.

  • Charcoal

    #1F2937 → #4B5563 · 180°

    Dark mode, sober elegant backgrounds.

  • Mango

    #FBBF24 → #F97316 · 135°

    Food and beverage, playful gradients.

Other tools people reach for in the same flow.

Design
Design

Palette Generator

Generate harmonious color palettes from any base color.

Popular
Design

Color Converter

Convert colors between HEX, RGB and HSL. Paste any format, get the others.

Frequently asked questions

What's the difference between linear, radial and conic gradients?

Linear interpolates colors along a straight axis. Radial spreads color out from a central point. Conic rotates colors around a point, like the color wheels in Photoshop. Each fits a different scene.

How do I choose the angle of a linear gradient?

0 degrees goes bottom to top, 90 degrees left to right, 180 top to bottom and 270 right to left. Intermediate angles create smooth diagonals. For a modern look, 135 or 45 usually works.

Can I use the generated CSS directly?

Yes. The output is a background-image property ready to paste into your stylesheet or a custom CSS variable.

Does it work with more than two colors?

For simplicity this version uses two colors. If you need extra stops, copy the generated rule and add the extra stops manually inside the CSS rule.