Tools
CSS Gradient Generator
Create CSS linear and radial gradients visually. Add and position color stops, control angle, choose from preset palettes, and copy the ready-to-use CSS declaration.
FreeLinear & RadialCSS ExportPresets
°
Presets
Color Stops
0%
100%
CSS
background: linear-gradient(135deg, #0d9488 0%, #3b82f6 100%);
Linear vs. radial gradients
Linear gradients transition colors along a straight line at any angle. Radial gradients radiate from a center point, creating a circular or elliptical transition. Linear gradients are more common for backgrounds and buttons; radial gradients work well for spotlight effects and glowing elements.
Tips for beautiful gradients
- Use analogous colors (neighboring on the color wheel) for smooth, natural-looking gradients.
- 135° or 45° diagonal gradients feel more dynamic than flat horizontal or vertical ones.
- Add a subtle mid-stop to give gradients more depth.
- High contrast gradients work for heroes; low contrast for background textures.