🌈

CSS Gradient Generator

Create beautiful CSS gradients for your website backgrounds.

Gradient Controls

Gradient Type

Linear Radial Conic

Direction

Angle: 90°

Color Stops

Gradient Preview

CSS Code

background-image: linear-gradient(to right, #3B82F6, #8B5CF6);

Presets

About CSS Gradients

What are CSS Gradients?

CSS gradients let you display smooth transitions between two or more specified colors. They are created using the CSS background-image property and can be used anywhere an image might be used.

Types of Gradients

CSS supports three types of gradients:

Linear Gradients - Colors flow in a straight line
Radial Gradients - Colors radiate from a center point
Conic Gradients - Colors rotate around a center point

Browser Support

Linear and radial gradients are supported in all modern browsers. Conic gradients have good support in Chrome, Firefox, Safari, and Edge, but may require prefixes in some browsers.

Tips for Using Gradients

Use subtle gradients for backgrounds to avoid distracting from content
Consider using gradients with transparency for overlays
Test your gradients on different screen sizes and brightness settings
For better browser compatibility, provide a solid color fallback