CSS Gradient Generator
Build linear and radial CSS gradients visually and copy the ready-to-use CSS — nothing is uploaded.
Generate CSS gradient backgrounds visually
Add color stops, adjust the angle, and switch between linear and radial modes. The preview and CSS output update instantly as you make changes. Copy the ready-to-paste background property with one click. Everything runs locally in your browser — no data is uploaded.
Color stops can include optional percentage positions. If you leave the position blank the browser distributes the stops evenly, which matches the behavior of the generated CSS. Drag the angle slider to rotate a linear gradient from 0 to 360 degrees.
FAQ
What is the difference between linear and radial? A linear gradient transitions colors along a straight line at a given angle. A radial gradient radiates outward from a center point in a circle.
Can I use named colors or rgba? Yes — the stop color field accepts any valid CSS color value, including named colors, rgb(), rgba(), and hsl().