CSS Gradient Generator
Build linear and radial gradients visually, then copy the CSS or export the background image.
FreeNo sign-up
Preview
Options
0%
100%
CSS
background: linear-gradient(135deg, #3D6C45 0%, #8FC79A 100%);
Build linear and radial gradients visually, then copy the CSS or export the background image.
Hand-writing a CSS gradient means guessing at angles and stop positions until it looks right. This tool makes it visual: drag the angle, add or remove stops, slide each stop into place, and watch the result update. Then copy the CSS or export a 1920×1080 background image.
How to use it
- 1Choose the gradient type (linear, radial or conic).
- 2Set the angle and add, remove or reposition the color stops.
- 3Copy the CSS, or download a PNG to use as a cover background.
FAQ
Related tools
- Midjourney Grid SplitterSlice a 2×2 or 3×3 AI grid image into separate tiles and download them all at once.
- Image CompressorDrop images and tune the quality slider to shrink them — before/after size shown, nothing uploaded.
- Image ResizerResize by pixel or social preset — Xiaohongshu, Instagram, X, video covers — with locked aspect ratio.
- Color Palette ExtractorPull the dominant colors out of an image as HEX/RGB values plus copy-ready CSS variables.
- Image Format ConverterConvert between PNG, JPG and WebP in bulk, entirely in the browser, with an adjustable quality.
- EXIF Metadata RemoverRe-encode an image to strip camera, timestamp and GPS metadata — with a privacy scan first.
- Image CropperDrag a region, lock a common ratio, rotate and flip, then export the exact crop.
- White Background MakerTurn a flat background white in one click — clean product shots, nothing uploaded.
- SVG Preview & to PNGPaste SVG markup to preview it and export a transparent PNG at any scale.
- Color Palette GeneratorGenerate complementary, triadic and analogous palettes from a base color as HEX and CSS variables.