Presets:
Angle90°
Color Stops
Position %
Opacity
Position %
Opacity
CSS Output
What This Tool Does
Generate CSS gradients visually with a live preview. Choose between linear, radial, and conic types. Add unlimited color stops with position and opacity controls. Six presets demonstrate common gradient styles.
Frequently Asked Questions
What is the difference between linear, radial, and conic gradients?
A linear gradient transitions colors along a straight line at a given angle. A radial gradient radiates from a central point outward in a circular or elliptical shape. A conic gradient rotates colors around a center point like a color wheel — great for pie charts and spinner animations.
What are color stops?
Color stops define where each color in the gradient starts and ends. You can have unlimited stops. Adding a stop at the same position as an adjacent stop creates a sharp color transition rather than a smooth one.
How do I make a transparent gradient?
Set the alpha channel of a color stop to 0 (fully transparent). This is useful for fading an element into a background. The tool supports rgba colors via the opacity slider on each stop.