CSS Gradient Generator

Create beautiful CSS gradients with live preview. Linear, radial, and conical gradients.

Quick Presets

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

How to Use

1. Choose colors: Select start and end colors using the color pickers or enter hex values directly.

2. Select type: Choose between linear, radial, or repeating linear gradients.

3. Adjust angle: Use the slider to change the gradient direction (for linear gradients).

4. Copy CSS: Click the Copy button to copy the CSS code to your clipboard.