CSS Gradient
Linear, radial and conic gradients with smooth OKLCH transitions. Export as CSS, SVG or image.
Open in editorBlurry Gradient
Dreamy backgrounds from large, strongly blurred color circles. Export as PNG, JPG, WebP, SVG or CSS.
Open the generatorRuns right in your browser. Your graphics are made on your device.
Start from a preset
Pick a preset and it opens right in the editor, ready to adjust.
What is it?
A blurry gradient is a background made of a few large color circles, blurred so strongly that only soft clouds of color remain. It works well behind text, as a website hero, in presentations and as a wallpaper.
How it works
Choose two to five circles and whether they sit in the corners or around the center, then set size, spread, opacity and blur. Press Space for a new variant, add grain if you like, and export as PNG, JPG, WebP, SVG or CSS.
Try the Blurry Gradient nowFAQ
- Will text stay readable on top?
- Yes, with enough contrast. Light circles on a light background or dark ones on a dark background keep the surface calm. Lower the opacity if the colors compete with your text.
- Does the SVG use filters?
- No. Every blurred circle is a radial gradient whose transparency follows the exact shape of a blurred circle. That is why the SVG looks the same in every browser and design app and renders fast at any size.
- What does Spread do?
- It moves each circle away from its anchor point by a random amount, toward the middle of the image. At 0 the circles sit exactly on the corners or in the center.
- Does the export look like the preview?
- Yes. Preview and export use the same graphic, and the positions are computed from the seed. The same settings and seed always give the same result.
Ready-made gradients
More than 30 original gradients with CSS to copy, each one ready to adjust in the editor.
Browse the gradient collectionRelated generators
All generators in Gradients
Mesh Gradient
Soft, flowing color gradients from several blurred color fields. Export as PNG, JPG, WebP, SVG or CSS.
Open in editor
Striped Gradient
Vertical stripes, each with its own gradient, slightly offset against each other. Export as PNG, JPG, WebP, SVG or CSS.
Open in editor
CSS Patterns
Over 30 pure CSS patterns: dots, grids, stripes, waves and geometric shapes. Export as CSS, Tailwind, SVG or image.
Open in editor
Blob Generator
Organic shapes in one click, filled, outlined or with a gradient. Export as SVG or image.
Open in editor
SVG Waves
Layered waves for sections, headers and backgrounds. Export as SVG, CSS or image.
Open in editor