CSS Gradient Generator

Build stunning gradients with live preview — linear, radial & conic

Gradient Type

Angle

135°

Color Stops

Color

Position: 0%

Opacity: 100%

Presets

Preview

Color Strip

CSS Code

background:

linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);

Usage Examples

CSS

background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);

Tailwind arbitrary

className="[background:linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%)]"

React inline

style={{ background: 'linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%)' }}