Gradient Generator

Create beautiful CSS gradients with multiple color stops and directions.

Controls

Customize your gradient

Gradient Type

Gradient Presets

Direction: 90°

↑→↓←

Color Stops

Position:0%

Position:100%

Advanced Options

Animated Gradient

Noise Texture

Smoothing0%

Preview

See your gradient in action

CSS Output

linear-gradient(90deg, #667eea 0%, #764ba2 100%)

bg-gradient-[to-r]

style="{{ background: 'linear-gradient(90deg, #667eea 0%, #764ba2 100%)' }}"

Usage Examples

See how the gradient looks in different contexts

Button

Card

This card uses your gradient

Background

Background Text

History