CSS Gradient Generator
Create linear and radial gradients and get the code for CSS, Flutter, and React Native.
How to Use This Generator
Step-by-Step Guide
1. Select Colors: Use the "Start Color" and "End Color" pickers to choose your two colors.
2. Choose Type: Select "Linear" for a straight-line gradient or "Radial" for a circular one.
3. Adjust Angle (Linear Only): If using a linear gradient, drag the "Angle" slider to change its direction (e.g., 90deg is left-to-right).
4. Get Code: Select your desired code format (CSS, Flutter, React Native) from the tabs and click the copy button.
What is a CSS Gradient?
A gradient is a smooth transition between two or more colors. In web design, gradients are treated as a type of image and are typically used as a background for elements like buttons, headers, or the entire page.
They are more flexible than static images because they are generated by code, meaning they don't lose quality when resized and can be easily updated.
Linear vs. Radial Gradients
This tool can generate the two most common types of gradients. Here's the difference:
| Type | Description | Best For |
|---|---|---|
| Linear | Colors transition in a straight line. You can control the direction with an angle. | Page backgrounds, buttons, and "hero" sections. |
| Radial | Colors radiate from a central point outwards in a circular or elliptical shape. | Creating a "spotlight" effect or a subtle background glow. |