What it does
WebGradients pairs a collection of named background presets with an editable gradient generator. Each preset provides colour values and CSS, while the generator supports linear, radial and conic blends. The site is free, including personal and commercial use.
Refine the preset before using it
Open a gradient in the generator to carry its colours and positions into the editor. Add between two and five stops, move them by dragging or entering percentages, and adjust the direction or centre. Stops can share a position when a sharp colour boundary is wanted.
Copy CSS includes a solid background fallback and the gradient declaration. The output omits vendor prefixes and legacy browser filters.
For a presentation or social image, select a PNG size and download a raster version. Rendering takes place in the browser. A share link preserves the editor’s colours and stops, allowing another person to revisit the same arrangement.
Strengths
- Preset pages show both colour values and usable CSS
- Share links preserve the edited gradient settings
- PNG export renders locally in the browser
Watch out for
- The generator accepts two to five colour stops
- Generated CSS does not include legacy browser filters
Best for
- Adapting a ready-made website background
- Sharing a gradient treatment between web and image workflows
Sources
- WebGradients collection (Oct 27, 2026)
- About WebGradients (Oct 27, 2026)
- WebGradients generator and usage guide (Oct 27, 2026)