CSS Gradient Generator

Create beautiful CSS gradients with a visual editor and copy the code

Type

Angle: 90°

Color 1

Color 2

CSS Code

background: linear-gradient(90deg, #667eea, #764ba2);

Frequently Asked Questions

What is a CSS gradient?▼

A CSS gradient is a smooth transition between two or more colors, created entirely with CSS. No image files needed. Gradients can be linear (straight line) or radial (emanating from a point).

How do I use the generated CSS?▼

Copy the CSS code and paste it as a background property. For example: background: linear-gradient(90deg, #ff0000, #0000ff);