Gradient Generator
Build a CSS linear-gradient with two stops and a live preview. Copy the CSS locally.
Live preview
Angle: 135°
CSS output
linear-gradient(135deg, #6366F1, #22D3EE)
background: linear-gradient(135deg, #6366F1, #22D3EE);
Gradient preview
background: linear-gradient(135deg, #6366F1, #22D3EE);
linear-gradient(135deg, #6366F1, #22D3EE)
Why use a gradient generator?
A two-stop linear gradient is the usual CSS background for a hero, a button, or a token you will paste into a stylesheet. Drag the angle, swap the stops, and copy either the function or a background declaration. This is not a mesh, conic, or radial editor — two sRGB stops and one angle are the scope, so you can see contrast before you commit.
Popular gradients
Your data stays private
Gradient CSS is generated in this browser. Nothing is uploaded or stored on a server.
About building a CSS linear gradient
Gradient Generator previews a CSS linear-gradient from two colors and an angle. The preview is a DOM box; the output is a copy-paste gradient string. It runs locally. Use it for hero backgrounds, buttons, and tokens you will paste into a stylesheet — not for Photoshop mesh gradients or CSS conic/radial in this panel.
Angle is degrees in the linear-gradient sense. Two stops only: this is not a multi-stop editor. If you need more stops, copy the two-stop string and extend it by hand. Colors are sRGB. Related Color Picker if you want HEX first; CSS Formatter if you want the surrounding rule pretty-printed.
Shadows and borders are separate tools. Nothing is uploaded.
The URL is /tools/gradient-generator. We do not export PNG of the preview as a design asset pipeline. Repeating-linear-gradient and radial-gradient are out of scope here — paste the linear string and adapt. Close the tab to discard the draft stops.
Brand palettes still live in your design tokens. This is a two-stop scratch pad so you can see angle and contrast before you paste.
How to build a gradient
Pick two colors
Set the start and end stops. The preview updates in the panel.
Set the angle
Degrees rotate a linear-gradient. 180 is a common top-to-bottom.
Copy the CSS
Paste into a background-image or a custom property.
Keep it local
Close the tab to discard the draft. Color Picker helps if you only needed one hex.
Related tools
Color Picker
Pick a color and copy HEX, RGB, and HSL values in this browser.
Image Color Picker
Open an image, hover to magnify pixels, and copy HEX, RGB, and HSL. Nothing is uploaded.
CSS Shadow Generator
Tune box-shadow offset, blur, spread, and color, then copy the CSS.
CSS Border Generator
Preview border width, style, radius, and color, then copy the CSS.
Color Converter
Convert colors between HEX, RGB, and HSL. Type or paste below — all three formats update as you type.
Gradient Generator FAQ
Two in this panel. Copy the linear-gradient and extend extra stops by hand. Angle is CSS degrees. Conic and radial are out of scope here.
No. The box is local DOM. Copy the CSS into your stylesheet.
It copies the gradient function. Wrap it in background-image yourself. CSS Formatter pretty-prints a surrounding rule.
Not as a design-asset pipeline. Copy the CSS linear-gradient string. Two stops and an angle are the scope. Repeating, radial, and conic gradients are out of this panel — adapt the string by hand. Close the tab to discard the draft stops. Nothing is uploaded.