CSS Gradient
Free online CSS gradient generator. Create beautiful linear and radial gradients. Adjust colors and angles visually. Copy the generated CSS code instantly.
How to Use CSS Gradient
Choose Gradient Type
Select "Linear" for a directional gradient or "Radial" for a circular gradient. For linear gradients, you can adjust the angle from 0° to 360°.
Pick Colors
Use the color pickers to select your start and end colors. The preview updates in real-time as you adjust the colors.
Adjust Settings
For linear gradients, use the angle slider to control the direction. 0° goes bottom-to-top, 90° goes left-to-right, 180° goes top-to-bottom.
Copy CSS Code
Click "Copy CSS" to copy the generated CSS code to your clipboard. Paste it directly into your stylesheet or HTML.
Example Gradients
Frequently Asked Questions
What is a CSS gradient?
A CSS gradient is a smooth transition between two or more colors. Unlike images, gradients are generated by the browser and can be used anywhere an image value is accepted in CSS. They are resolution-independent and can be animated.
Linear vs Radial gradients — which should I use?
Linear gradients transition colors along a straight line and are ideal for backgrounds, headers, and banners. Radial gradients transition from a center point outward and work well for circular elements, spotlights, and buttons. Choose based on the visual effect you want.
Can I use more than two colors?
Yes! CSS gradients support multiple color stops. While this tool generates two-color gradients for simplicity, you can easily add more colors to the generated CSS by adding additional color stops. For example: linear-gradient(135deg, #ff0000, #00ff00, #0000ff).
Are CSS gradients supported in all browsers?
Yes, CSS gradients are supported in all modern browsers, including Chrome, Firefox, Safari, and Edge. For very old browsers, you may want to provide a solid color fallback using the background-color property.
CSS Gradient Best Practices
CSS gradients are a powerful tool for creating modern, visually appealing web designs without loading images. They're lightweight, responsive, and can be animated.
Tips for Great Gradients
- Use colors that are close on the color wheel for subtle effects
- Use contrasting colors for bold, dramatic backgrounds
- Add a solid background-color as a fallback for older browsers
- Combine gradients with other CSS properties like border-radius and box-shadow