HH Color Lab
Gradient Maker

Design custom gradients, copy the CSS.

Design custom CSS gradients with multiple color stops.

Gradient maker

Design custom CSS gradients with multiple color stops.

Color stops (2 or more)

Type

Ready-made ideas

Your CSS


  



                    






How to use this tool (step by step)
Small steps, each with the reason behind it. Perfect for beginners, and a handy checklist for experts.
  1. Choose the colors
    • Look at the list of color stops. Each has a color square, a position (0 to 100) and a remove button.
    • Press a color square to change it.
    • Press + Add stop for more colors, or click on the bar under the preview.
    Why we do this: A gradient is a smooth change from one color to the next. The stops say which colors and where.
  2. Move the stops
    • Drag the handles on the bar left or right.
    • Or type a number in the position box.
    • Watch the preview change.
    Why we do this: Moving a stop controls how quickly one color turns into the next.
  3. Choose the type
    • Linear goes in a straight line. Use the angle slider to choose the direction.
    • Radial spreads out from the center.
    • Conic sweeps around like a color wheel.
    Why we do this: Different types give very different looks for backgrounds, buttons and artwork.
  4. Copy your CSS
    • Press Copy CSS.
    • Paste it into your style sheet.
    • Or press Download PNG to get a picture.
    Why we do this: The CSS line works directly in any website.
Questions people ask
Quick answers.
What does smoother blending mean?
It tells the browser to blend colors in the OKLab space, which avoids dull gray patches between some colors. It works in current browsers; older ones ignore the line, so keep a normal version too.
How many colors can a gradient have?
As many as you like. Most designs use two to four.
Can I use the gradient as text color or border?
Yes, with a few more CSS lines (background-clip: text or border-image). The gradient itself is the same.