Free tools, Images and design
CSS gradient generator
Build a gradient with as many colors as you like and copy the CSS.
Color stops
Presets
Guides
Questions
What is the difference between linear, radial and conic gradients?
Linear blends colors along a straight line at the angle you set. Radial spreads colors outward from a center point, like a spotlight. Conic sweeps colors around a center, like a pie chart or a color wheel.
Do CSS gradients work in all browsers?
Linear and radial gradients work in every browser in use today without prefixes. Conic gradients work in all current versions of Chrome, Edge, Firefox and Safari.
Why does my gradient look banded?
Large areas with two close colors can show visible steps on some screens. Add a middle color stop, or place a very subtle noise image on top.
More images and design tools
- Background removerCut people and products out of photos and get a transparent PNG.
- Image compressorShrink photos and convert them to WebP, JPEG or PNG.
- Image converterConvert between PNG, JPG and WebP, and turn SVG into PNG.
- HEIC to JPGTurn iPhone photos into JPGs that open everywhere.
- Image resizerResize and crop to exact sizes for Instagram, YouTube, Facebook and more.
- Color palette from imagePull the main colors out of any photo, with HEX and RGB codes.