Create a CSS linear or radial gradient between two colors, preview it live, and copy the code.
100% client-side · nothing is uploaded
Loading tool…
How to use the Gradient
Pick Color 1 and Color 2 with the color pickers.
Choose linear or radial, and set the angle for linear gradients.
Watch the live preview update as you change settings.
Click Copy to grab the ready-to-use CSS.
Privacy: this tool runs entirely in your browser. Your input is never sent to, received by, or stored on any server — there are no uploads and no tracking of what you enter.
About Gradient
CSS gradients
Gradients let you blend colors smoothly in a background without an image. CSS supports linear gradients (along an angle) and radial gradients (outward from a center).
How to use it
Pick two colors, set the angle for linear gradients, choose linear or radial, and the live preview updates instantly.
Copy and paste
The generated CSS is ready to drop straight into your stylesheet's background property.
Frequently asked questions
What's the difference between linear and radial?
Linear gradients run along a straight line at an angle; radial gradients spread outward from a center point.
Can I change the angle?
Yes — set any angle in degrees for linear gradients (90° is left-to-right).
Is the CSS standard?
Yes — it uses the standard linear-gradient() and radial-gradient() functions supported by all modern browsers.
ToolWren