🌈 CSS Gradient Generator

The CSS Gradient Generator builds linear and radial CSS gradients from two or more colour stops, previews the result live, and gives you the exact CSS to paste into your stylesheet. Gradients are back in fashion as backgrounds, button fills, and hero overlays; being able to see one instantly instead of guessing angle and stop values speeds up prototyping.

How to Use This Tool

Pick your first and second colours, choose a direction (or angle in degrees for a linear gradient) or a shape (for a radial gradient), and the preview updates in real time. Copy the generated CSS from the output box and paste it into a background or background-image property in your stylesheet.

SEO Best Practices

Keep gradients subtle when they sit behind text — a strong colour shift makes body copy harder to read, and reduces the contrast ratio between text and background. Prefer HSL-adjacent colours (small hue rotation, similar lightness) for a smooth transition; hex colours chosen at random often produce muddy midpoints because RGB interpolation doesn't match perceived colour. For dark-mode support, define both light and dark gradients as CSS custom properties and switch between them with prefers-color-scheme.

Example

A linear-gradient(135deg, #0EA5E9 0%, #A855F7 100%) produces a diagonal sky-blue to purple sweep — a common hero background style. Copy the one-line CSS into a background property and you're done.

Common Mistakes to Avoid

Don't use hard colour stops (0%, 0%) to fake a two-colour split unless you actually want a sharp band — pointing that at users as a background usually looks like a rendering bug. Don't layer text over the busy part of a gradient without an overlay; a semi-transparent dark rectangle between the gradient and the text usually saves the day.