Create beautiful CSS gradients visually. Generate linear and radial gradients with multiple color stops.
What is a CSS gradient?
A CSS gradient is a CSS property that allows you to display smooth transitions between two or more specified colors without using images.
What is the difference between linear and radial gradients?
Linear gradients transition colors along a straight line (you set the direction/angle). Radial gradients transition colors from a center point outward in a circular or elliptical shape.
How many color stops can I use?
You can use as many color stops as you need. Each stop defines a color and optionally a position (0% to 100%) along the gradient line.
How do I use the generated CSS code?
Copy the generated CSS code and use it as the value for the background or background-image property in your stylesheet.