CSS Gradient Generator
The CSS Gradient Generator creates linear, radial, and conic gradients for web design. Gradients add visual interest to backgrounds, buttons, and UI elements without images. This generator lets you choose gradient type, add multiple color stops, adjust angles, and preview the result in real time. It generates ready-to-use CSS code that you can copy directly into your stylesheet.
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.