Generate abstract, geometric cover art using pure CSS shapes. Export as PNG or copy the HTML/CSS code.
<div style="background: linear-gradient(to bottom right, hsl(200, 70%, 96%), hsl(200, 60%, 92%), hsl(220, 55%, 90%)); position: relative; width: 100%; aspect-ratio: 3/2; overflow: hidden;"> <div style="position: absolute; left: 46.72109712541206%; top: 61.47964724477348%; transform: translate(-50%, -50%); width: 25.01150474651857%; aspect-ratio: 1; border-radius: 50%; border: 2px solid hsla(200, 70%, 60%, 0.3); background: hsla(200, 70%, 60%, 0.10106444323534561)"></div> <div style="position: absolute; left: 23.740007778387522%; top: 78.31117166980279%; transform: translate(-50%, -50%); width: 38.16783898572236%; aspect-ratio: 1; border-radius: 50%; border: 2px solid hsla(240, 60%, 55%, 0.3); background: hsla(240, 60%, 55%, 0.12098544865938411)"></div> <div style="position: absolute; left: 27.997114041817483%; top: 17.496107791081172%; transform: translate(-50%, -50%); width: 43.56571657216709%; aspect-ratio: 1; border-radius: 50%; border: 2px solid hsla(280, 50%, 50%, 0.3); background: hsla(280, 50%, 50%, 0.1452390101414537)"></div> <div style="position: absolute; left: 41.64200493287482%; top: 27.177207006306578%; transform: translate(-50%, -50%); width: 56.51905878355639%; aspect-ratio: 1; border-radius: 50%; border: 2px solid hsla(200, 70%, 60%, 0.3); background: hsla(200, 70%, 60%, 0.09979264957810999)"></div> </div>
Choose from 8 styles: Circles, Grid, Bars, Dots, Layers, Document, Concentric, or Matrix.
Adjust the base hue for a harmonious palette, set complexity, toggle accent circles, and change gradient direction.
Copy the HTML/CSS code to use in your project, or download as a PNG image.
Each tool works standalone, runs entirely in your browser, and requires no signup.
Varstatt is a one-person product studio run by Jurij Tokarski, product engineer since 2011. These tools are free and open — no signup, no catch.