Linear vs radial — when to use which
Pick two or three colors and an angle (linear) or shape (radial), and copy the ready-to-paste background CSS.
- linear-gradient: color flows in one direction — great for buttons, headers, and background bands.
90deg= top to bottom,0deg= bottom to top,135deg= diagonal. - radial-gradient: color spreads from the center outward — good for a spotlight effect or rounded card backgrounds.
Two colors vs three
Two stops stay clean and safe. A third color adds a midpoint (50%) for a richer blend, but mixing high-contrast colors can make the band edges stand out.
Things people trip on
- Angle confusion: CSS angles go clockwise with
0degpointing up — a different reference than many design tools. - Text legibility: text over a gradient loses contrast at one end. A semi-transparent dark overlay layer keeps it readable.
Pick base colors with the Color Palette tool, and pair it with the box-shadow generator.