Process up to 200 images per job — pick your settings once, run them all.
Pick two or more colours, drag the gradient to taste, copy the CSS. Or download as a PNG to use as a wallpaper, a slide background, or a social-post backdrop. Linear, radial, and conic gradients all supported, plus a mesh-gradient mode for the soft Apple-style backgrounds you see in modern UIs.
Gradient types explained
- Linear: straight line from colour A to colour B. Direction picker (top→bottom, diagonal, etc.).
- Radial: concentric — colour A in the centre fading to colour B at the edges. Useful for spotlight effects.
- Conic: sweeps around a centre point like a colour wheel. Trendy in modern UI design.
- Mesh (premium): multiple colour blobs blended smoothly. The "Apple gradient" look.
What you can copy
- CSS: ready-to-paste
linear-gradient(...) or background-image: declaration.
- Tailwind: the closest
bg-gradient-* class plus any custom-colour additions.
- SVG: for scalable use in icons or UI graphics.
- PNG download: any size, including phone wallpaper (1284×2778), desktop (3840×2160), and square (1080×1080).
Common use cases
- Phone wallpapers: mesh gradients are huge on iOS. Try our iPhone Wallpaper Preview to test.
- Social-post backgrounds: instant on-brand look for quote graphics.
- Hero sections: gradient backdrops are everywhere on landing pages.
- Slide decks: replace boring solid backgrounds.
Picking colours that work
Adjacent on the colour wheel = subtle, harmonious. Opposite = bold, attention-grabbing. Add a third middle stop to bridge a wide gap. For brand-faithful gradients, paste your brand HEX and pick a tint or shade for the second stop. Use our Color Converter to find tints (HSL with higher lightness) or shades (lower).
Frequently asked questions
Can I use these in production?
Yes — copied CSS works in any modern browser. SVG fallbacks are provided for older targets.
What about radial gradient browser support?
Universal in modern browsers. The CSS syntax is one line.
How big can I export the PNG?
Free: up to 4K (3840×2160). Premium: 8K and beyond.
Are mesh gradients hard to use?
On the web they're SVG- or canvas-based. We give you a flattened PNG for easy use, plus the SVG source for editing.
Can I save my gradients?
Sign in (free) and saved gradients appear in your library.
What's a 'conic' gradient?
Sweeps around a point — like a colour wheel or a pie chart. Modern CSS supports it natively.
Does it work for animated gradients?
Static export only. For animated backgrounds, copy the CSS and add a CSS animation around the gradient angle.
Why not just hand-write CSS?
You can — the tool just makes the visual iteration faster. Copy and tweak.
About Gradient Generator
Gradient Generator is a free online tool from Wallpapers.com that runs entirely in your browser — no install, no watermark, no email sign-up for the first try.
Build linear or radial gradients with copy-paste CSS output.
How to use Gradient Generator
- Pick a colour from the swatch or paste a HEX / RGB value.
- Adjust the output — palette, contrast, complementary colours.
- Copy the value, or export the swatch as JSON.
When to use it
Common use cases include:
prepping images for web upload, e-commerce listings, social media platforms with format constraints, and converting files from one device or app to another.
Free vs Premium
Every visitor gets a free trial run; signed-in free users get a higher daily quota. Subscribe to
Premium
for unlimited runs, bulk processing up to 200 images per job, priority queue, and ad-free browsing.
Related tools
Looking for something slightly different? Try the
Color Picker from Image
,
Palette Extractor
or
Grayscale Converter
— or browse all
Color Tools tools.
