CSS Gradient Generator
Build linear and radial gradients with exportable CSS.
Use this free online CSS gradient generator to create beautiful linear and radial background gradients instantly. Customize colors, angles, and gradient stops with a live preview, then copy the generated CSS code directly into your project. Perfect for hero sections, buttons, and modern UI backgrounds.
About this tool
Generate CSS Gradients
Build linear-gradient() and radial-gradient() backgrounds with adjustable angles, color stops, and instant preview.
- Copy ready-to-use CSS code
- Live background preview as you adjust settings
- Supports Linear and Radial types
- Hex and RGB color support
Gradient Design Tips
Subtle gradients add depth without overwhelming UI elements.
- Use analogous colors (next to each other on the wheel) for smooth blends
- Adjust angle to lead the user's eye
- Test contrast against white and black text
How to Use CSS Gradient Generator
Choose Type
Select 'Linear' for a directional flow or 'Radial' for a circular spread.
Pick Colors
Click the color stops to open the picker. You can adjust the position of each color to control the transition point.
Copy CSS
Once satisfied, click 'Copy CSS' to get the standard `background-image` rule for your stylesheet.
Common questions
What is a CSS gradient?
A CSS gradient is a background image generated using CSS that transitions smoothly between two or more colors. It is commonly created using the linear-gradient() or radial-gradient() functions.
What is the difference between linear and radial gradients?
A linear gradient transitions colors along a straight line (horizontal, vertical, or angled), while a radial gradient spreads colors outward from a central point in a circular or elliptical shape.
Can I use CSS gradients instead of images?
Yes. CSS gradients are lightweight and do not require image files, which improves page load speed and performance compared to using background images.
How do I create a gradient with multiple colors?
You can add multiple color stops to the gradient function. For example, linear-gradient(to right, red, yellow, green) creates a gradient with three distinct color stops.
Can I use this with Tailwind CSS?
Yes. While Tailwind has built-in gradients, complex custom gradients often require arbitrary values. You can add the generated CSS to your `styles` or `config`.
Is this supported in all browsers?
Yes. Standard linear and radial gradients are supported in all modern browsers (Chrome, Firefox, Safari, Edge).
Can I add transparency?
Yes. You can input RGBA or Hex with Alpha values to create gradients that fade into transparency.
How do I change the angle?
For linear gradients, use the angle slider or input a specific degree (e.g., 45deg, 90deg, 180deg).
Does it support repeating gradients?
Currently, this tool focuses on standard linear and radial gradients.
Related tools