CSS Gradient Generator
How to Use
- Select a gradient type: linear or radial.
- For linear gradients, adjust the angle to set the direction.
- Add, remove, or modify color stops to customize the gradient.
- Each stop has a color picker and a position (0-100%).
- Copy the generated CSS with the copy button.
CSS Gradients
CSS gradients let you display smooth transitions between two or more colors. Linear gradients go in a straight line at a specified angle, while radial gradients radiate from a center point. They are commonly used for backgrounds, buttons, overlays, and decorative effects.
Gradient Types
- Linear gradient: Colors transition along a straight line defined by an angle (e.g., 0deg = bottom to top, 90deg = left to right, 135deg = top-left to bottom-right).
- Radial gradient: Colors transition outward from a center point in a circular or elliptical shape.
Use Cases
- Creating eye-catching page backgrounds and hero sections.
- Styling buttons with gradient fills for a modern, polished look.
- Adding text overlays on images using semi-transparent gradients.
- Designing card hover effects with smooth color transitions.
- Building decorative dividers and section separators.
- Generating gradient-based loading indicators and progress bars.
Gradient Design Tips
- Use subtle gradients with similar hues for a professional, understated appearance.
- Test your gradients on different screen sizes and brightness levels to ensure they look good everywhere.
- Combine gradients with transparency (rgba or hsla colors) to create layered effects over images or other backgrounds.
- Stick to two or three color stops for clean, readable gradients — too many stops can look noisy.
- Use angles like 135deg or 45deg for diagonal gradients that add visual depth.
Privacy
All processing happens in your browser. No data is sent to any server.
FAQ
What is the difference between linear and radial gradients?
A linear-gradient transitions colors in a straight line at a chosen angle, while a radial-gradient radiates outward from a center point in a circular or elliptical shape. Linear suits backgrounds and button fills; radial suits spotlight-style effects.
Are the gradient colors I create sent to a server?
No. Generating the gradient, the live preview, and the CSS output all happen in your browser, and your colors and settings are never sent to a server.
How many color stops can I add?
You can freely add and remove stops with the Add Stop and Remove buttons, and each stop has its own color and position (0-100%). For clean, readable gradients, two or three stops usually work best.
How do I set the angle?
For linear gradients the angle sets the direction: 0deg goes bottom to top, 90deg left to right, and 135deg top-left to bottom-right. Radial gradients do not use an angle.
Can I make gradients with transparent parts?
Yes. Use colors with transparency (rgba or hsla) for the stops to create layered effects over images or other backgrounds. The preview shows the transparent areas.