Pattern Style

Gradient Direction

Base Hue: 200°

Complexity: 50%

Accent Circle

Variation Seed

HTML / CSS

<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>

How It Works

Pick a pattern

Choose from 8 styles: Circles, Grid, Bars, Dots, Layers, Document, Concentric, or Matrix.

Customize

Adjust the base hue for a harmonious palette, set complexity, toggle accent circles, and change gradient direction.

Export

Copy the HTML/CSS code to use in your project, or download as a PNG image.

FAQ

Abstract, geometric artwork created entirely with HTML and CSS — no images needed. Perfect for blog posts, cards, and social media.

Yes. The generated covers are yours to use however you like. No attribution required.

The tool redraws the CSS shapes on an HTML Canvas element, then exports as a PNG at your chosen resolution. For smooth color blends instead of geometric shapes, try the mesh gradient generator.