Web Tools
CSS Gradient Generator
Create copyable linear and radial CSS gradients with a live preview.
CSS background image
background-image: linear-gradient(90deg, #2563eb 0%, #7c3aed 50%, #ec4899 100%);About This Tool
CSS gradients create generated background images that blend between two or more color stops without requiring an image file. This generator makes the important parts visible: gradient type, direction or shape, each stop's color, and where that stop sits along the gradient. Use the live preview to explore a background, hero treatment, card accent, or decorative surface, then copy the resulting background-image declaration into your stylesheet.
How To Use It
- Choose a linear or radial gradient.
- For a linear gradient, set its angle; for a radial gradient, choose a circle or ellipse.
- Edit each color and its percentage position. Add more stops for multi-stage transitions or remove optional stops.
- Review the live preview and copy the generated background-image CSS. Test text contrast separately when content will sit on top of the gradient.
Examples
Two-color diagonal
Use blue at 0%, purple at 100%, and 135 degrees for a simple diagonal transition.
Three-stop highlight
Place a lighter middle color around 50% between darker endpoint colors to create a highlighted band.
Radial glow
Choose a circle with a bright center stop at 0% and a darker outer stop at 100% for a centered glow effect.
Useful Notes
How color stops work
A gradient stop combines a color with a position along the gradient line or ray. Percentages near 0% appear toward the start and percentages near 100% toward the end. Multiple stops let you control where transitions begin, end, or pass through intermediate colors.
Linear gradient angles
CSS linear-gradient angles use 0deg toward the top, 90deg toward the right, 180deg toward the bottom, and 270deg toward the left. Angles outside that range are also valid because CSS treats them cyclically.
Radial circles and ellipses
Radial gradients expand outward from a center. A circle keeps equal radii while an ellipse can stretch with the box. The final appearance therefore depends on the element's dimensions as well as the chosen colors.
Generated CSS and fallbacks
The tool outputs a background-image declaration. For interfaces where a background is important to comprehension, consider a plain background-color fallback before the gradient declaration so the surface remains usable if styling is unavailable.
Readability over gradients
A gradient can contain both very light and very dark regions, so checking text against only one endpoint can miss a low-contrast area. Place important text carefully and use the Color Contrast Checker to evaluate representative background colors.
Local and lightweight
The gradient is generated and previewed by your browser. No image is uploaded and no raster asset is created, keeping iteration immediate and avoiding an unnecessary network dependency.
FAQ
Does a CSS gradient require an image file?
No. Browsers generate CSS gradients as images from the gradient function in your stylesheet.
Why are my stops reordered?
The generator orders stops by their percentage positions so the control values map predictably from 0% to 100%.
Can I use more than two colors?
Yes. Add color stops and assign each a percentage position to create multi-color transitions.
Is gradient text automatically accessible?
No. Readability depends on the foreground color and every background region behind the text. Verify contrast and avoid relying on color alone to communicate meaning.
Related Tools
Color Converter
Convert and preview HEX, RGB, and HSL colors.
Color Contrast Checker
Check WCAG text contrast ratios for two web colors.
CSS Unit Converter
Convert relative CSS units with the context that determines their real size.
CSS Clamp Calculator
Build fluid CSS clamp() values from size and viewport endpoints.