CSS Gradient Generator
Quicky generate CSS code for colorful gradients.
To get started, click the color swatches in the "Color Stops" section to change the default colors, or click the "+ Add Color" button to build your own custom gradient.
How This Tool Works.
Our generator gives you complete control over your CSS gradients through a simple, interactive interface. Here’s a breakdown of the features:
​
The Live Preview.
The large box at the top is your canvas. It updates in real-time to show you exactly what your gradient looks like as you adjust the settings.
​​
Main Gradient Controls.
Just below the preview, you can set the global style of your gradient:
​
-
Type: Use the toggle to switch between a Linear gradient (colors transition along a straight line) and a Radial gradient (colors radiate from a central point).
-
Angle: When "Linear" is selected, use the Angle slider to change the direction of the gradient from 0 to 360 degrees.
-
Shape: When "Radial" is selected, you can choose between an Ellipse or a Circle shape for your gradient's radiation pattern.
​​
Color Stops.
This is where you build your palette. Each row represents a "color stop"—a specific color at a specific position in the gradient.
​
-
Change Color: Click the square color swatch to open a color picker, or type a hex code directly into the text field.
-
Adjust Position: Use the long slider in each row to change the position of that color along the gradient, from 0% to 100%.
-
Add/Remove: Click the "+ Add Color" button to add a new color stop to your gradient. Click the red "×" button to remove any unwanted color.
​​
Code Output.
The textarea at the bottom of the tool instantly generates the precise CSS background property for your design. When you're happy with your creation, just click the "Copy" button to copy the code to your clipboard and paste it directly into your project's stylesheet.