background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
How to Use This Tool
- The gradient preview updates in real time — start by adjusting the angle slider or switching between "Linear" and "Radial" types.
- Click a color swatch to open the color picker and choose a stop color.
- Drag the position sliders to move each color stop along the gradient.
- Click "+ Add Stop" to add more color stops for a multi-color gradient, or "×" to remove one. Click "Copy" to grab the CSS code.
Common Use Cases
- Creating smooth linear gradient backgrounds for hero sections, banners, and cards.
- Building radial glow effects for buttons, badges, or spotlight visual effects.
- Designing gradient text using background-clip: text with a CSS gradient.
- Generating subtle gradient overlays for image backgrounds to improve text contrast.
- Experimenting with multi-stop gradients to create rainbow, sunset, or brand-specific color effects.
Frequently Asked Questions
What is the difference between a linear and radial gradient?
A linear gradient transitions along a straight line at a specified angle. A radial gradient radiates outward from a central point, creating a circular or elliptical pattern. Both are defined in pure CSS without any images.
Do CSS gradients work in all browsers?
Yes. linear-gradient() and radial-gradient() have been supported in all major browsers (Chrome, Firefox, Safari, Edge) for well over a decade. The generated code requires no vendor prefixes for modern browser targets.
What is a color stop position?
A color stop position (expressed as a percentage 0%–100%) defines where along the gradient a specific color begins. By moving stops closer together you create sharper transitions; further apart creates smoother, more gradual blends.
Can I use this gradient as a background image?
Yes. The generated CSS uses the background property, which treats the gradient as an image. You can also use background-image: linear-gradient(...) directly if you want to layer it over a background-color or another background image.