How to Use the CSS Gradient Generator
Choose a gradient type at the top: Linear gradients flow along a straight line at your chosen angle. Radial gradients expand outward from a center point in a circle or ellipse shape. Conic gradients sweep around a center point like a color wheel.
Control the angle with the slider (0–360°) or type a value directly. 0° is top-to-bottom, 90° is left-to-right, 135° is diagonal.
Add color stops using the color swatches (click to open the native color picker) or type a HEX code directly. Drag the position slider or type a percentage to set where each color starts. You can add up to 5 stops and remove any stop with the × button.
Apply a preset from the grid to get started instantly. Presets include Sunset, Ocean, Forest, Neon, Lavender, and more.
Hit Random for an instant surprise gradient — great for inspiration.
Copy the CSS with the Copy button. The output includes both the standard background property and the -webkit- prefixed version for maximum browser compatibility.
CSS Gradient Syntax Reference
A linear gradient uses linear-gradient(angle, color1 pos1, color2 pos2, ...). The angle is in degrees: 0deg goes bottom to top, 90deg goes left to right, 180deg goes top to bottom.
A radial gradient uses radial-gradient(shape size at position, colors...). Shape is circle or ellipse. Position can be keywords like center, top left, or percentage values.
A conic gradient uses conic-gradient(from angle, colors...). Colors sweep around a point like a pie chart rather than radiating outward. Browser support is now excellent across modern browsers.
For smooth gradients, avoid placing two color stops at the same position unless you want a hard color edge. Spreading stops evenly (0%, 50%, 100%) creates the smoothest transitions.
Related: Pick perfect colors with our Color Picker