Design & downloads
Colour palette & gradients
Choose colours and copy a CSS gradient.
How to use this tool
Add a colour, adjust the gradient and copy the CSS or share a preset.
Shared links can include your settings and text. Share only information you want others to see.
Preview your gradient
Select start, optional midpoint, and endLive preview120° linear gradient
Build a colourful gradient
Pick a hero color, auto-generate supporting tones, and export CSS-ready linear or radial gradients for decks, landing pages, and story covers.
#7C3AED#F472B6
Try a ready-made palette
Apply curated palettes and ship fasterSunset Breeze
creator brand kitslanding pages
Dusk gradients built for launch stories
Miami Neon
social cardsevent promos
Vibrant palettes for high-energy drops
Zen Garden
wellness brandscalm dashboards
Spa-grade tones for breathing room layouts
Midnight Pop
product UISaaS hero blocks
Cinematic blues with dopamine CTA pops
Chai Latte
brand kitscase studies
Comfort-first neutrals for premium storytelling
Share this tool on a website
Embed on blogs, Notion, Carrd, and beyondDrop the widget below into your posts. It keeps your palette + gradient live and links back to this tool. Perfect for resources pages, design inspo newsletters, and crediting collaborations.
Keep a copy of your CSS and check the colours with the text and background of the page where you use them.
Explore more FunSurveys utilitiesSomething to try
Make a consistent colour palette
Add a few colours, choose linear or radial and adjust the stops. Copy the CSS snippet or share the preset.
Colours that look attractive together may still need a contrast check before being used behind text.
Keep creating
