Loading tool…
ToolWrenCreate a CSS linear or radial gradient between two colors, preview it live, and copy the code.
Loading tool…
Gradient is a free, private online tool that lets you build a CSS linear or radial gradient between two colors and copy the ready-to-use code. It runs entirely in your browser, so nothing you enter is uploaded to a server.
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.
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).
Pick two colors, set the angle for linear gradients, choose linear or radial, and the live preview updates instantly.
The generated CSS is ready to drop straight into your stylesheet's background property.
A CSS gradient is a smooth blend between two or more colors, rendered directly by the browser as a background - no image file needed. Because it is generated in code, a gradient scales to any size with perfect sharpness, loads instantly, and can be tweaked freely. This generator builds the CSS for you and previews it live.
The two main types differ in how the colors flow. A linear gradient blends along a straight line at an angle you choose - 90 degrees runs left to right, 180 top to bottom - ideal for backgrounds, buttons and banners. A radial gradient blends outward from a center point in circles, useful for spotlights, glows and soft vignette effects.
Gradients are set with the background property using the linear-gradient() or radial-gradient() functions, for example background: linear-gradient(90deg, #3b82f6 0%, #22d3ee 100%). The angle (or shape) comes first, then each color with an optional position. The browser interpolates every pixel between the color stops, so the result is resolution-independent.
Gradients add depth and visual interest that flat colors cannot, and modern design uses them everywhere - hero sections, buttons, cards, overlays on images, and brand accents. Because they are pure CSS, they are faster than image backgrounds, easy to animate, and trivial to adjust, making them a staple of contemporary web design.
Pick two colors, choose linear or radial, set the angle for linear gradients, and watch the live preview update. When you are happy, copy the ready-made CSS straight into your stylesheet. Everything is generated in your browser.