CSS Gradient Generator
Build any CSS gradient visually. Five gradient types including repeating. Per-stop opacity, direction shortcuts, colour format output (hex/rgb/hsl), vendor prefixes, custom CSS selector and 20 categorised presets. Click the preview bar to add colour stops.
Five Gradient Types
- Linear — transitions colours along a straight line. Control the angle precisely with the slider or use the direction shortcuts (→ ↓ ↗ etc.).
- Radial — radiates from a centre point outward in a circle.
- Conic — rotates colour stops around a centre point. Used for pie charts, colour wheels, and angular decorative elements.
- Repeating Linear — tiles the gradient pattern repeatedly across the element. Useful for stripes, ruled lines, and repeated patterns.
- Repeating Radial — tiles concentric rings. Used for target/bullseye patterns and ripple effects.
Colour Format Output
Choose whether stop colours are written as HEX (#00d4ff), RGB (rgb(0, 212, 255)), or HSL (hsl(192, 100%, 50%)) in the generated CSS. When a stop has opacity below 1, the output always uses rgba() regardless of the format setting — this is the only valid way to express transparency in gradient stops.
CSS Selector and Vendor Prefixes
Type your actual CSS selector in the selector field — .hero, #banner, body — and the output is a complete, paste-ready CSS rule block. Tick "Vendor prefixes" to add -webkit-linear-gradient alongside the standard property for maximum browser compatibility in older environments.
Repeating Gradients
repeating-linear-gradient() and repeating-radial-gradient() tile the defined gradient pattern. The key is to set your colour stops within a short range — for example stops at 0%, 5%, and 10% — and the browser repeats that segment across the full element. Useful for diagonal stripes, progress bars, and decorative borders.