CSS Gradient Generator

Create linear and radial gradients for your projects.

Options

Color 1

Color 2

Gradient Type

Angle: 90°

CSS Code

About CSS Gradients

CSS gradients let you create smooth transitions between two or more specified colors. They are a type of <image>, which means they can be used anywhere an image can be, like background-image.

Linear Gradients: These proceed along a straight line. You can control the direction (or "angle") of the color transition.
Radial Gradients: These radiate from a central point. The colors transition from the center outwards in a circular or elliptical shape.

This tool helps you visually build the perfect gradient and provides the cross-browser compatible CSS code for you to use in your projects.