CSS gradient generator
Create linear, radial and conic gradients with multiple colors, preview them live and copy the ready-to-use CSS code.
How it works
Pick the gradient type, angle and colors with their positions. Add as many color stops as you like and see the result live.
Copy the generated CSS (background: linear-gradient(...)) into your stylesheet. Sample gradients are included for inspiration.
Frequently asked questions
Do CSS gradients work in every browser?
Yes, linear-gradient and radial-gradient work in every modern browser without prefixes, and so does conic-gradient since 2020.
Is a CSS gradient better than an image?
A CSS gradient weighs almost nothing, scales to any size and needs no extra download, so it makes your site faster.
Related tools
Favicon generator online
Design your website favicon with text, initials or an emoji, or create it from an image. Download favicon.ico, PNGs in every size, a manifest and HTML code.
Open toolFree QR code generator
Create free QR codes for links, text, WiFi, email or WhatsApp. Pick colors and size and download them as PNG or SVG. No expiry, no sign-up.
Open toolHEX, RGB and HSL color converter
Convert colors between HEX, RGB and HSL, pick colors with the color picker and generate a shade scale ready to copy as CSS variables.
Open toolColor contrast checker (WCAG)
Compute the contrast ratio between text and background colors and check whether it meets WCAG 2.1 AA and AAA accessibility guidelines.
Open toolResize, compress and convert images
Shrink, compress and convert images to JPG, PNG or WebP without uploading them anywhere. Ideal for speeding up your site and meeting size limits.
Open toolNeed a custom tool for your business?
Tell us about your case and in 30 minutes we'll give you a clear diagnosis: what's going on, what to do first and what it might cost. No strings attached.