Skip to content
▨

Gradient Generator

Build CSS gradients visually.

  • #6366f10%
  • #a855f7100%
background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);

In CSS, 0deg points upward and 90deg points right. Stops are emitted in position order.

About Gradient Generator

CSS gradient generators design smooth color transitions for backgrounds and buttons using stops, angles, and radial centers. toco.tools previews linear and radial gradients and outputs copy-ready CSS locally. Very old browsers may lack modern syntax; validate against your supported browser list.

How to use

  1. Pick linear or radial
  2. Adjust colors and angle
  3. Copy the CSS snippet

FAQ

What is a CSS gradient generator?

A visual tool that builds linear or radial-gradient CSS.

Are settings sent externally?

No. All processing runs in your browser.

Linear vs radial?

Linear fades along a line; radial spreads outward from a center point.