CSS Gradient Generator

A classic tool to pick two or more colors, set angles (linear/radial), and generate code that works across browsers.

Type

Direction (deg)

Position

Colors

CSS Code

Features

Linear & Radial Gradients: Create standard linear or circular radial gradients.
Custom Angles: Rotate your linear gradient 360 degrees.
Multiple Color Stops: Add as many colors as you like and position them precisely.
Visual Editor: See changes instantly as you tweak colors and positions.

How to Use

Select between Linear or Radial gradient type.
Adjust the angle (for linear) or position (for radial).
Add color stops and pick your desired colors.
Adjust the percentage position of each color stop to control the blend.
Copy the CSS background property.