Your Gradient
Adjust the controls to create your perfect gradient.
Live Preview
Adjust the controls to create your perfect gradient.
A CSS gradient is a smooth transition between two or more colors generated directly by the browser — no image files needed. Using CSS gradients reduces bandwidth usage, improves performance, and scales perfectly at any resolution. They are widely used for page backgrounds, buttons, cards, hero sections and text effects.
CSS defines three main types of gradients, all of which you can generate using the tool above.
A linear gradient transitions colors along a straight line in a specified direction. You define a starting color, ending color, and an angle (e.g. 135deg). The browser then renders a smooth fade between those colors. Linear gradients are the most commonly used type — perfect for backgrounds and button fills.
Syntax: background: linear-gradient(135deg, #7c6fff, #ff6fb0);
A radial gradient radiates outward from a central point in a circular or elliptical shape. Colors transition from the center to the edges. Radial gradients are great for spotlight effects, glowing UI elements and circular backgrounds.
Syntax: background: radial-gradient(circle, #7c6fff, #ff6fb0);
A conic gradient transitions colors rotating around a center point — like the segments of a pie chart. Unlike radial gradients where colors spread outward, conic gradient colors rotate around the circle. They are commonly used for pie charts, color wheels and decorative designs.
Syntax: background: conic-gradient(from 0deg, #7c6fff, #ff6fb0);
| Chrome | Firefox | Safari | Edge | Opera |
|---|---|---|---|---|
| 26+ | 16+ | 6.1+ | 12+ | 12+ |
Select a gradient type (Linear, Radial or Conic) using the tabs at the top of the sidebar. Add color stops by clicking "+ Add Color Stop" and pick your colors using the color picker. Adjust the angle slider to change the direction of the gradient. Click any preset to load a pre-built gradient. Finally, select your output format (CSS, Tailwind or SCSS) and click Copy Code to copy the result.