CSS Gradient Generator
Create linear, radial, and conic gradients with interactive color stops, angles, and curated presets.
Gradient Settings
Angle135°
Color Stops (2/6)
0%
100%
Curated Presets
Live Preview
linear gradient
CSS Background Gradient
css
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);How It Works
CSS gradients are smooth transitions between two or more specified colors, treated as image values by browsers:
- Linear Gradients: Progress colors along an imaginary straight line specified by an angle in degrees (e.g.
135deg) or directional keywords. - Radial Gradients: Emanate outward from a central focal point into circular or elliptical bands.
- Conic Gradients: Sweep colors clockwise around a central axis (like color wheels or pie charts).
Related Frontend Tools
Core
CSS Unit Converter
Convert rem, px, em, viewport, and physical CSS dimensions with real-time accuracy.
Popular
Color Converter
Bidirectional color conversion across HEX, RGB, RGBA, HSL, HSLA, HSV, and OKLCH.
WCAG
Color Contrast Checker
Calculate WCAG 2.1 contrast ratios and verify accessibility compliance for normal text, large text, and UI components.