What This Tool Does
This CSS gradient generator builds linear-gradient and radial-gradient CSS values with a live preview. You can set multiple color stops, adjust the angle or position, and copy the final CSS code ready to paste into your stylesheet. Perfect for modern web design, buttons, hero sections, and card backgrounds.
Inputs Explained
- Gradient Type: Linear (along an angle) or Radial (from a center point).
- Angle: For linear gradients, 0-360 degrees. 0° = bottom-to-top, 90° = left-to-right.
- Color Stops: Two or more colors with optional position percentages.
- Preview: Live rectangle showing the current gradient.
How It Works
The tool constructs the CSS string from your inputs: linear-gradient(90deg, red 0%, blue 100%) or radial-gradient(circle at center, red, blue). It applies the same value to the preview box's background-image property in real time, so what you see is exactly what you'll copy.
Formula / Logic Used
CSS Gradient Generator
Create linear and radial CSS gradients with live preview and copy-ready code.
CSS Code
Step-by-Step Example
Type: Linear, Angle: 90°
Colors: #2563eb at 0%, #0d9488 at 100%
Output CSS:
background: linear-gradient(90deg, #2563eb 0%, #0d9488 100%);
Add intermediate color stops (e.g., white at 50%) to create multi-color gradients. For radial gradients, select the shape and center position from the dropdown.
Use Cases
- Hero section backgrounds: Create eye-catching gradient backgrounds for landing pages.
- Button styling: Design modern CTA buttons with subtle color transitions.
- Card designs: Add gradient overlays to cards and panels for visual depth.
- Logo backgrounds: Test brand color combinations before finalizing designs.
- Dark mode themes: Design smooth gradient transitions for dark UI elements.
Assumptions and Limitations
- Generated CSS uses standard syntax supported in all modern browsers (IE11+, though IE has limited support).
- Very complex gradients with many stops may render differently on old mobile devices.
- Color stops should be in ascending order for predictable results.
- For conic-gradient support, use a dedicated tool — this generator handles linear and radial only.
Frequently Asked Questions
What's the difference between linear and radial gradients?
Linear gradients transition colors along a straight line at a specified angle. Radial gradients transition outward from a center point in a circular or elliptical shape. Linear is more common for backgrounds; radial for spotlight effects.
What angles work best for linear gradients?
0° goes bottom-to-top, 90° goes left-to-right, 180° goes top-to-bottom, 270° goes right-to-left. 45° and 135° create diagonal gradients that often look most natural for backgrounds.
Can I use more than 2 colors?
Yes. Click 'Add Color Stop' to include intermediate colors at specific positions. Three-color gradients (e.g., blue → white → orange) are common for sunrise/sunset effects and brand themes.
How do position percentages work?
Each color stop has a position from 0% to 100%. The color appears exactly at that point along the gradient line. Equal spacing (0%, 50%, 100%) creates smooth transitions; uneven spacing emphasizes specific colors.
Why does my gradient look banded?
8-bit displays show visible bands on long, subtle gradients. Solutions: use higher-contrast colors, add grain texture, or limit gradient length. Modern 10-bit displays and HDR support handle subtle gradients better.
Do gradients work in older browsers?
All modern browsers (Chrome, Firefox, Safari, Edge) support linear-gradient and radial-gradient natively. For IE11 support, add vendor prefixes. The generated CSS here works from roughly 2015 onwards without prefixes.
Can I save my gradient for later?
Copy the CSS code to your project. The tool doesn't save gradients between sessions — bookmark or commit the CSS to your repo to preserve it.
Is my design data stored?
No. Gradient construction runs entirely in your browser. Your color choices never leave your device.
Sources and References
- MDN — linear-gradient — Complete reference for CSS linear-gradient syntax.
- MDN — radial-gradient — Complete reference for CSS radial-gradient syntax.
- CSS Images Module Level 4 — W3C specification including conic-gradient and modern features.
- Can I Use — CSS Gradients — Browser compatibility for gradient features.