Realtime Colors
realtimecolors.com
Previews a palette on a real page layout instead of five swatches
No sign-upOn device
Loading page
cssgradient.io
Builds a linear or radial gradient and hands you the CSS to paste.
Drag colour stops along a bar, set the angle, switch between linear and radial, and copy the generated CSS with the prefixes filled in. There is a gallery of ready-made gradients underneath for when you only need something that is not grey. It generates a background and stops there.
AltFTool does this too
If you would rather not leave the site, Gradient Generator covers the same job here — free, no account, and it runs in your browser.
Open Gradient GeneratorQuestions
Works the moment the page loads. No account, no email, no trial. Linear and radial only — no mesh gradients, no noise, no animation.
No. CSS Gradient does the work inside your browser, so the file never leaves your device — you can load the page, disconnect from the network, and it still works. That makes it a reasonable choice for material containing personal data.
Linear and radial only — no mesh gradients, no noise, no animation.
Alternatives
Same category or same task, ordered by how closely they overlap.
realtimecolors.com
Previews a palette on a real page layout instead of five swatches
webaim.org
Tells you whether two colours pass WCAG contrast, and by how much
coolors.co
Hit the space bar until a five-colour palette appears that works
fontawesome.com
A large icon set with a free tier you can ship without attribution
fontsquirrel.com
Free fonts hand-checked for a genuinely commercial licence
fontjoy.com
Suggests heading and body font pairings, and locks the one you like