Gradients do not need a generator-shaped wall of percentages. Start with two colours, name a direction, and add a stop only when it changes the visual hierarchy. The thing that usually breaks is text contrast, not CSS syntax.
.hero {
background: linear-gradient(135deg, #102a43 0%, #2563eb 100%);
color: white;
}
Pick the gradient by geometry
| Effect | Function | Good use |
|---|---|---|
| Directional wash | linear-gradient() | Header, button, card background |
| Glow from a point | radial-gradient() | Focus area or subtle vignette |
| Repeated stripes | repeating-linear-gradient() | Texture with restraint |
An explicit angle such as 135deg is easier to preserve than “to bottom right” when a design later changes orientation. Put the solid fallback first if the gradient is decorative and the component still needs to read in constrained environments.
Do not use a low-opacity gradient over live text as a contrast fix. Test the text against its lightest and darkest underlying areas; a single average colour is misleading.
Use variables for a reusable system
:root {
--brand-start: oklch(0.35 0.12 250);
--brand-end: oklch(0.62 0.18 255);
}
That gives design tokens a home and avoids copying slightly different blue values into five components. A visual generator is excellent for exploration; before shipping, reduce its output to the few stops that actually make the design work.