Two- or three-stop gradients from the full Tailwind palette. Export phone wallpaper, Instagram, Open Graph, or 4K PNGs, and copy the matching CSS or Tailwind snippet.
CSS
background: linear-gradient(135deg, #34d399, #15803d);Tailwind
bg-gradient-to-br from-emerald-400 to-green-700Stops
Editing · stop 1
emerald-400#34d399
Angle
Custom size
Preset sizes
Phone wallpapers
Tablet wallpapers
Social
Desktop
Export ZIP
3 presets
Pick your stops
Two-stop by default; add a via-stop for a three-color gradient.
Dial the angle
0–360° slider. Tailwind snaps to the nearest of 8 cardinal directions.
Copy or download
CSS and Tailwind snippets in one click; export PNGs at any preset size or as a ZIP.
Not in its core gradient utilities — bg-gradient-* supports 8 cardinal directions. This tool shows the nearest Tailwind class and also emits pure CSS if you need a custom angle.
Wallpapers, OG images, and most exports expect raster. We rasterize the gradient at exactly the target resolution so you get a sharp, no-banding image.
Yes — 22 colors × 11 shades, straight from Tailwind v4's default palette. Same hex values Tailwind ships.
Apple and Google publish device-exact wallpaper dimensions; we ship the current flagships (iPhone 15 and 15 Pro Max, Pixel 8). For a different device, use the custom size panel — anything between 100 and 8192 pixels works.
Mesh gradient
Draggable radial-gradient blobs on a Tailwind palette — trendy mesh backgrounds without signup.
Shade generator
Generate a full 50→950 Tailwind palette from any base color, along the Tailwind lightness curve.
Translating screenshots into every locale is what lokal was built for. Upload once, ship to every store.
Explore lokal