Toolbuns/Gradient

CSS Gradient Generator

Build a CSS gradient and copy the code.

Color 1
Color 2
Type
Angle135°
background: linear-gradient(135deg, #ff9e2c, #1a3c8c);

Build a CSS gradient visually and copy the code. Pick colors, direction, and stops, then paste the result straight into your stylesheet.

How to use Gradient

  1. Choose two or more colors and their stops.
  2. Set the gradient type and angle.
  3. Preview it live.
  4. Copy the generated CSS.

Frequently asked questions

Does it support linear and radial gradients?

Yes. Switch between linear (directional) and radial (from a center point) and tweak the angle or position.

Can I use more than two colors?

Yes. Add multiple color stops to create smooth multi-color gradients.

Is the CSS ready to paste?

Yes. It outputs standard CSS you can drop directly into a background or background-image property.

Related tools
Color ConverterBox Shadow