Background generator
Build a background from a gradient, soft mesh blobs or a simple pattern, add a little grain if you like, then copy the CSS for your site or download a PNG for slides, posts and wallpapers.
Free, no sign-up. Runs in your browser. Nothing you type or upload is sent to us or stored.
Want a page that already looks finished?
A free Liite page comes with six themes, from soft sunset tones to plain black and white. Pick one, add your links, and your page is live at liite.co/yourname.
How to use it
- Pick a type: linear or radial gradient, mesh, or pattern.
- Set the colours and the angle, position or tile size, or press Randomise for a starting point.
- Copy the CSS or the Tailwind class, or choose a size and download a PNG.
Four kinds of background
A linear gradient blends two to four colours along a line at any angle. A radial gradient blends them outwards from a point, as a circle or an ellipse. A mesh background layers several soft blobs of colour over a base colour, which gives the loose, painterly look you see on many app and product sites. Patterns repeat a small tile: dots, a grid, diagonal stripes or a checkerboard.
Grain adds fine noise on top. It hides the banding you sometimes get in smooth gradients and makes flat colour feel less digital.
Using the CSS
The CSS is a single background declaration, so it drops into any stylesheet or a style attribute. It works in every current browser and needs no image files: the grain is written as a tiny inline SVG. For Tailwind, the class is an arbitrary property, which works for gradients, layered blobs and patterns alike; paste it into your class list as it is.
Pattern sizes are in pixels, so a 24px dot grid looks the same on a small card and a full page. The preview here shows the background at its real pixel size, scaled down to fit.
Downloading a PNG
Choose a social size or enter your own width and height, up to 4096 pixels a side. The PNG is drawn in your browser from the same settings, so it matches the CSS closely; the grain is random each time, so no two downloads are exactly the same.
Questions
Is it free to use the backgrounds?
Yes. The CSS and the PNGs are yours to use on websites, slides, posts or anything else, with no credit needed.
Does the CSS work without Tailwind?
Yes. The CSS output is plain CSS. The Tailwind class is a second option for projects that use Tailwind.
Why does my gradient show stripes of colour?
That's banding: there aren't enough shades between two colours across a large area. Add a little grain, or pick colours that are closer together.
Can I use a background on my Liite page?
Liite pages use one of six built-in themes, each with its own colours. Custom background images aren't part of themes yet, but you can add the PNG as an image on your page.
Is anything uploaded?
No. The preview, the CSS and the PNG are all made in your browser.