CSS Gradient Generator
Create linear and radial CSS gradients for backgrounds, buttons, and hero sections. Copy the code instantly.
CSS gradient syntax and usage
A CSS gradient is set with the background property. A linear gradient uses linear-gradient(angle, color1, color2) where the angle controls direction (135deg is top-left to bottom-right). A radial gradient uses radial-gradient(circle, color1, color2) and radiates from the center.
Gradients work as button backgrounds, hero section fills, card overlays, and text effects. For text gradients, apply background-clip: text with -webkit-text-fill-color: transparent. Combine with the Color Picker to find complementary colors, and the Box Shadow Generator to add depth around gradient elements. For broader selector, spacing, and layout basics, read the CSS beginner guide.
How to choose gradient colors
Use two colors with enough contrast when text or icons sit on top of the gradient. Similar hues create a soft background, while complementary colors create a stronger transition that may need a dark overlay for readability. Test the copied CSS at the final element size because a gradient that looks good in a large preview can feel harsh on a small button.
For subtle interface backgrounds, keep one color close to white or use muted brand shades. For decorative hero sections, add the gradient behind real content and confirm that links, buttons, and form labels still meet contrast expectations on mobile and desktop.
Practical gradient checklist
Check the gradient on the actual component before publishing. Small buttons usually need calmer colors than full-width banners. Large backgrounds need enough variation to feel intentional, but not so much contrast that text becomes hard to scan. Keep a solid fallback color near the first gradient color for older clients, email previews, or screenshots where CSS is simplified.
When using gradients in a design system, save the final CSS value with a descriptive name such as --hero-gradient or --button-gradient. Reusing named values keeps pages consistent and makes later color changes easier. If the gradient sits behind body text, test it with normal, hover, focus, disabled, and high-contrast states.