CSS Gradient Generator
Create beautiful gradients with intuitive controls.
Copy the result as CSS code, or download it as a PNG image.
This tool has been used … times.
background: linear-gradient(90deg, ...);
Presets
Color Stops
How to Use the CSS Code
Paste the copied code into the CSS of the element you want to style.
Example: applying it to a button
.my-button { /* paste it here */ background: linear-gradient(90deg, #56CCF2, #2F80ED); /* other styles */ color: white; border: none; font-family: inherit; }
* It also works as the background-image property.
Tips for Better Gradients
Stick to similar hues
Combining colors with close hues — such as blue and cyan, or red and orange — gives a natural, pleasing gradient.
Combining colors with close hues — such as blue and cyan, or red and orange — gives a natural, pleasing gradient.
Mind the angle
For website backgrounds, “135deg (top-left to bottom-right)” and “180deg (top to bottom)” are common, easy-to-use angles.
For website backgrounds, “135deg (top-left to bottom-right)” and “180deg (top to bottom)” are common, easy-to-use angles.
Be careful with 3+ colors
Too many colors can look muddy. If you’re new to this, start with just two colors.
Too many colors can look muddy. If you’re new to this, start with just two colors.