CSS Gradient Generator — Linear & Radial CSS Gradients
CSS Gradient Canvas
linear-gradient(90deg, #3b82f6 0%, #10b981 100%)
Gradient Configurations
Linear Angle90°
Color Stops (2/6)
0%
100%
CSS Stylesheet Code
background: linear-gradient(90deg, #3b82f6 0%, #10b981 100%); background: -webkit-linear-gradient(90deg, #3b82f6 0%, #10b981 100%);
Curated Gradient Presets
About This Tool
Design beautiful, high-fidelity CSS background gradients with our visual linear and radial gradient generator. Add up to 6 custom color stops, control positions and angles, preview details in real-time, copy code, and load curated design presets instantly.
How to Use
- Toggle between Linear (straight line) and Radial (circular glow) gradient patterns.
- Use the color stops panel: select a color circle node to customize its color and position.
- Click "+ Add Stop" to introduce a new color node, or click the Trash bin to remove an active node.
- Drag the Angle slider (0° to 360°) to adjust linear gradient directions.
- Load pre-designed presets (like Sunset Bloom, Aurora, or Neon Dream) for instant inspiration.
- Copy the generated CSS background code parameters to paste inside your stylesheets.