Gradient Generator
Create CSS gradients with visual controls and code output. Free, fast, and works entirely in your browser with no sign-up required.
Live Preview
linear
W:H:
0%50%100%
Gradient Settings
Hard Stops
Sharp transitions between color stops
0°
90°
deg
Color Stops
2
%
%
Preset Library
60 curated
Generated Code
background property
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);About Gradient Generator
- Linear, radial, conic, and mesh gradient types
- Multiple color stops with drag-to-reorder on the gradient bar
- Per-stop opacity control with rgba output and opacity preview swatch
- Interactive angle dial — click or drag to set direction
- Hard stops toggle for sharp, no-blend transitions
- Distribute stops evenly and add complementary color
- 58+ curated preset gradients in 7 categories
- 4-point and 6-point mesh gradient generator
- 5 preview modes: Swatch, Text, Button, Card, Border
- Animated gradient preview (continuous rotation)
- Adjustable canvas size for precise export dimensions
- Export as PNG, JPG, or SVG image
- History with visual thumbnails and one-click restore (last 20)
- CSS, Tailwind, styled-components, CSS Variables, and value-only output
Privacy First: All processing happens locally in your browser. No data is sent to any server.