CSS Gradient Generator

CSS gradient generator (linear & radial)

ToolsOfWeb’s CSS gradient generator helps you create smooth gradient backgrounds for websites, landing pages, buttons, and UI cards. Pick linear or radial, adjust the angle and color stops, preview the result, then copy a ready-to-use CSS snippet.

Gradients are a simple way to make a design feel modern. For best results, start with two colors, then add an optional third color for a softer blend. Keep contrast in mind if you place text on top.

How to build your gradient

1. Choose Linear or Radial — linear blends along an angle, radial blooms outward from the center.
2. For linear gradients, set the angle (0–360°). 135° gives the classic diagonal; 90° runs top to bottom.
3. Pick Color 1 and Color 2 with the color picker or by typing a hex code like #2563eb.
4. Adjust each color’s stop position (0–100%) to control where the blend happens — bunching stops creates harder edges.
5. Optionally add a third color and its stop for a richer, three-tone blend.
6. Watch the live preview, then hit Copy CSS to grab the ready-to-paste snippet.
7. Not happy with the result? Tweak one control at a time — changing everything at once makes it hard to learn what each setting does.

Reading the generated CSS

The output is a complete CSS rule you can drop straight into a stylesheet:

.my-gradient { background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%); }

Inside the parentheses: the angle, then each color with its stop position. A radial gradient reads radial-gradient(circle, #2563eb 0%, #4f46e5 100%) — same idea, no angle, blending outward from the middle. Rename .my-gradient to any class you like.

Linear vs. radial: when to use which

• Linear: hero backgrounds, buttons, cards, section dividers — anywhere you want directional color flow. Diagonal angles (120–150°) feel energetic; vertical blends feel calm.
• Radial: glows behind a headline, spotlight effects, vignettes, avatar rings — anywhere the eye should be pulled toward a center point.

Design tips for gradients that look premium

• Start with two colors: two well-chosen hues beat five random ones. Add the third color only when the blend needs softening in the middle.
• Keep text readable: white text over a gradient needs sufficient contrast across the whole blend — test the lightest stop, not just the average. When in doubt, darken both colors slightly or add a subtle overlay.
• Neighboring hues blend best: blue → indigo → violet looks smooth; red → green tends to pass through muddy brown in the middle.
• Use stops creatively: equal stops (0%/100%) give an even blend; pushing both stops toward the middle (30%/70%) creates a soft band of mixed color with solid edges — great for buttons.
• Stuck? Hit Randomize: the randomize button generates fresh color pairs, angles, and types — a fast way to discover combinations you wouldn’t have picked, which you can then fine-tune.

Browser support

The linear-gradient() and radial-gradient() functions work in all modern browsers without prefixes. If you need to support very old browsers, keep a solid background-color fallback declared before the gradient — old browsers will ignore the gradient line and use the flat color. For repeating patterns (stripes, checkerboards), the same color stops can be reused with repeating-linear-gradient() in your own CSS once you understand the stop syntax above.

Gradient ideas to try

• Hero glow: radial gradient, brand color at 0% fading to transparent at 70%, placed behind a headline on a dark section.
• Button sheen: linear 135°, two close hues (e.g. #3b82f6 → #6366f1), with a slightly lighter middle stop for a glossy feel.
• Section divider: a thin 4px bar with a horizontal gradient in brand colors — subtle structure without heavy borders.
• Card top accent: linear 90° strip, transparent → brand color → transparent, as a 3px top border on cards.

Privacy note

Nothing here needs a server: colors, angles, and the preview are all computed in your browser. The CSS snippet exists only on your device until you copy it.

FAQs