Tools / Gradient Generator
CSS Gradient Generator.
Pick a few colors, choose linear or radial, set the angle, and copy the
background rule. Live preview, no signup — and you can seed it
from any of the 378 historical Wada palettes.
—How CSS gradients work
Linear vs radial
A linear gradient blends colors along a straight line whose
direction you set with an angle (0deg = upward, 90deg =
rightward). A radial gradient blends outward from a center
point in concentric rings — good for spotlights and soft glows.
Color stops
Each stop is a color plus an optional position (0%–100%).
Two stops give a clean fade; three or more let you build bands and rainbows.
Evenly spaced stops are smoothest; clustering two stops creates a hard edge.