CSS Gradient Generator
Create linear, radial, and conic CSS gradients with multi-stop controls and curated presets.
Controls
Gradient Parameters & Color Stops
Live Preview
Canvas & Code Output
LINEAR • 3 STOPS
CSS Background Declaration
background: #0f172a; background: linear-gradient(135deg, #0f172a 0%, #0d9488 48%, #7de2d1 100%);
SVG Gradient Equivalent
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 450" width="800" height="450">
<defs>
<linearGradient id="grad" x1="15%" y1="15%" x2="85%" y2="85%">
<stop offset="0%" stop-color="#0f172a" />
<stop offset="48%" stop-color="#0d9488" />
<stop offset="100%" stop-color="#7de2d1" />
</linearGradient>
</defs>
<rect width="800" height="450" fill="url(#grad)" />
</svg>Related in Images & Design
More tools in this category
Color Palette
Convert between HEX, RGB, HSL, and HWB color formats and verify WCAG contrast ratios.
Image Converter
Convert images between PNG, JPG, and WebP formats locally with adjustable quality.
Image Resizer
Resize images by exact pixel dimensions or percentage scale while preserving aspect ratio.
Image Cropper
Crop, rotate, and flip images using common aspect ratio presets or freeform selection.