📋 Instructions: How to Use?

Select your 'Color 1' and 'Color 2' using the color pickers.
Drag the 'Angle' slider to rotate the gradient. The angle in degrees will update.
Alternatively, click the Direction Buttons (like ↗, ↓, ←) to snap to common angles.
The 'Preview' box will update live with your changes.
When you're happy, click the 'Copy CSS' or 'Share Gradient' button.

CSS Gradient Generator

Visually create beautiful linear gradients and copy the CSS code.

Controls

Color 1

Color 2

Angle 90 deg

Directions

Preview

CSS Code

Want to Learn How This Works?

This tool uses JavaScript to dynamically update CSS styles. To learn JavaScript from scratch, check out the free 15,000-word guides on CodeWithMSMAXPRO.me.

Start Learning Now →