ToolBoxy
Sign up free
🎨

CSS Gradient Generator

css · gradient · linear · radial · color

Angle135deg

Color stops

0%
100%
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);

How to use

  1. 1

    Pick a preset or build your own.

  2. 2

    Adjust type, angle and color stops.

  3. 3

    Copy the generated CSS.

FAQ

Is this tool free?

Yes — no sign-up, no installation, completely free to use right away.

What is this tool?

This tool creates smooth color gradients and gives you the CSS to use them. Adjust the colors and direction visually, then copy the code straight into your site. It runs entirely in your browser.