CSS Gradient Generator
Create beautiful CSS gradients — linear, radial, conic with live preview and copy-ready CSS output.
Color Stops
About CSS Gradients
CSS gradients let you create smooth transitions between colors without using images, reducing HTTP requests and allowing infinite resolution scaling. Linear gradients transition along a straight line at any angle. Radial gradients emanate from a central point. Conic gradients rotate around a center point, great for pie charts and color wheels.
Multi-stop gradients with precise position control let you create complex patterns. Adding the same color at two consecutive stops creates hard color transitions (no fade). The generated CSS uses the modern syntax compatible with all current browsers — no vendor prefixes needed.
FAQ
Can I use gradients as text colors?
Yes: set background: your-gradient, then background-clip: text and -webkit-background-clip: text, and color: transparent. This makes the gradient visible through the text shape instead of the background rectangle.
What is a hard stop gradient?
Placing two color stops at the same position (e.g., red 50%, blue 50%) creates a sharp edge with no transition. This technique creates striped patterns, split backgrounds, and other sharp-edge effects entirely in CSS.