CSS Gradient Generator
The CSS Gradient Generator creates linear, radial, and conic gradients for web design — the visual color blends you see behind buttons, hero sections, cards, and app backgrounds. Gradients add depth and polish without a single image file, which keeps pages fast and sharp on every screen size.
How CSS gradients work
A gradient is a smooth transition between two or more colors. Instead of a flat background-color, you give the browser a starting color, an ending color, and a direction — and it paints every pixel in between. The three types behave differently:
- Linear — blends along a straight line. The angle (like
90degorto right) controls which way the blend flows. This is the most common type for buttons and backgrounds. - Radial — blends outward from a center point in a circle or ellipse. Good for glows, vignettes, and spotlight effects.
- Conic — blends around a center point like a pie chart or color wheel. Used for loaders, dials, and rainbow effects.
What this generator does
Choose a gradient type, pick your colors, add stops to control where each color sits along the blend, and adjust the angle — the preview updates instantly. When it looks right, copy the generated CSS and paste it straight into your stylesheet. Everything runs in your browser; nothing is uploaded or stored.
Tips for good gradients
Two or three colors usually look better than five. Subtle shifts between neighboring hues (blue to teal) read as professional; hard jumps between opposites work for bold, playful designs. For text overlays, check that your gradient stays light enough (or dark enough) for readable contrast across its whole range.
Formula
Gradient types: - Linear: linear-gradient(angle, color1, color2) - Radial: radial-gradient(shape, color1, color2) - Conic: conic-gradient(from angle, color1, color2) Color stops: percentage or pixel position Angle: 0deg (top) to 360deg
Example
Linear gradient (90 degrees, blue to red): background: linear-gradient(90deg, #3498db, #e74c3c); Radial gradient (circle, white to blue): background: radial-gradient(circle, #ffffff, #3498db); Three-color linear gradient: background: linear-gradient(to right, #3498db, #9b59b6, #e74c3c);
How to Use
- Select gradient type (linear, radial, or conic)
- Choose colors and add color stops
- Adjust angle or position
- Preview the gradient in real time
- Copy the generated CSS code
Frequently Asked Questions
What is the difference between linear and radial gradients?
Linear gradients transition colors along a straight line (horizontal, vertical, or diagonal). Radial gradients transition from a center point outward in a circular or elliptical shape. Conic gradients transition around a center point like a pie chart.
How many color stops can I use?
There is no strict limit. Most gradients use 2-5 color stops. More stops create more complex transitions. For smooth gradients, space color stops evenly (e.g., 0%, 25%, 50%, 75%, 100%).
Are CSS gradients supported in all browsers?
Yes. Linear and radial gradients are supported in all modern browsers. Conic gradients are supported in Chrome, Firefox, Safari, and Edge but may need -webkit- prefix for older browsers. The generator can include vendor prefixes if needed.
Can I use transparency in gradients?
Yes. Use rgba() or hsla() color values with an alpha channel. For example, linear-gradient(90deg, rgba(52,152,219,0.5), rgba(231,76,60,0.8)) creates a gradient with 50% and 80% opacity.
How do I create a repeating gradient?
Use repeating-linear-gradient() or repeating-radial-gradient(). These repeat the gradient pattern. For example, repeating-linear-gradient(45deg, #3498db, #3498db 10px, #ffffff 10px, #ffffff 20px) creates a striped pattern.