CSS Gradient Generator

Create beautiful CSS gradients with a visual editor. Copy the CSS code.

Gradient Type

Angle: 90°

0°360°

Color 1

Color 2

Generated CSS

background: linear-gradient(90deg, #6366f1, #ec4899);

About CSS Gradient Generator

Free CSS gradient generator with a visual editor for creating linear and radial gradients. Pick colors, adjust direction and angle, add multiple color stops, and see a live preview of your gradient. Copy the generated CSS code including vendor prefixes for cross-browser compatibility. Perfect for web designers building modern interfaces, landing pages, buttons, and background effects.

Frequently Asked Questions

What types of gradients can I create?▾

You can create linear gradients (with custom angles and directions) and radial gradients (with custom center positions). Add as many color stops as you need and adjust their positions for precise control over the gradient effect.

Does the generated CSS work in all browsers?▾

Yes. The tool generates standard CSS gradient syntax that works in all modern browsers (Chrome, Firefox, Safari, Edge). The generated code follows current CSS specifications.