CSS Doodle Generator
Generate decorative patterns made of pure CSS.
64 cells, each one a styled <div> — no images involved.
<!-- CSS doodle: 8x8 grid, pure HTML + CSS, no images -->
<style>
.tj-doodle {
display: grid;
grid-template-columns: repeat(8, 1fr);
width: 100%;
max-width: 480px;
aspect-ratio: 1 / 1;
background: #0B1120;
}
.tj-doodle > i { display: block; aspect-ratio: 1 / 1; }
.tj-doodle > i:nth-child(1) { background: radial-gradient(circle at 33% 67%, #2DD4BF 0%, #A78BFA 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(2) { background: radial-gradient(circle at 59% 41%, #60A5FA 0%, #60A5FA 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(3) { background: radial-gradient(circle at 38% 62%, #2DD4BF 0%, #2DD4BF 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(4) { background: radial-gradient(circle at 39% 61%, #60A5FA 0%, #60A5FA 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(5) { background: radial-gradient(circle at 50% 50%, #2DD4BF 0%, #A78BFA 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(6) { background: radial-gradient(circle at 41% 59%, #60A5FA 0%, #2DD4BF 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(7) { background: radial-gradient(circle at 91% 9%, #A78BFA 0%, #60A5FA 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(8) { background: radial-gradient(circle at 36% 64%, #A78BFA 0%, #2DD4BF 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(9) { background: radial-gradient(circle at 1% 99%, #A78BFA 0%, #2DD4BF 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(10) { background: radial-gradient(circle at 35% 65%, #2DD4BF 0%, #2DD4BF 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(11) { background: radial-gradient(circle at 14% 86%, #2DD4BF 0%, #60A5FA 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(12) { background: radial-gradient(circle at 29% 71%, #60A5FA 0%, #A78BFA 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(13) { background: radial-gradient(circle at 8% 92%, #2DD4BF 0%, #60A5FA 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(14) { background: radial-gradient(circle at 53% 47%, #A78BFA 0%, #A78BFA 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(15) { background: radial-gradient(circle at 20% 80%, #2DD4BF 0%, #60A5FA 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(16) { background: radial-gradient(circle at 57% 43%, #60A5FA 0%, #A78BFA 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(17) { background: radial-gradient(circle at 95% 5%, #2DD4BF 0%, #2DD4BF 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(18) { background: radial-gradient(circle at 85% 15%, #60A5FA 0%, #2DD4BF 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(19) { background: radial-gradient(circle at 36% 64%, #60A5FA 0%, #A78BFA 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(20) { background: radial-gradient(circle at 65% 35%, #2DD4BF 0%, #2DD4BF 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(21) { background: radial-gradient(circle at 29% 71%, #A78BFA 0%, #2DD4BF 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(22) { background: radial-gradient(circle at 19% 81%, #A78BFA 0%, #A78BFA 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(23) { background: radial-gradient(circle at 22% 78%, #A78BFA 0%, #2DD4BF 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(24) { background: radial-gradient(circle at 48% 52%, #60A5FA 0%, #2DD4BF 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(25) { background: radial-gradient(circle at 8% 92%, #A78BFA 0%, #2DD4BF 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(26) { background: radial-gradient(circle at 96% 4%, #2DD4BF 0%, #A78BFA 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(27) { background: radial-gradient(circle at 98% 2%, #60A5FA 0%, #60A5FA 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(28) { background: radial-gradient(circle at 67% 33%, #2DD4BF 0%, #60A5FA 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(29) { background: radial-gradient(circle at 82% 18%, #2DD4BF 0%, #2DD4BF 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(30) { background: radial-gradient(circle at 52% 48%, #60A5FA 0%, #60A5FA 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(31) { background: radial-gradient(circle at 75% 25%, #2DD4BF 0%, #A78BFA 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(32) { background: radial-gradient(circle at 17% 83%, #2DD4BF 0%, #60A5FA 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(33) { background: radial-gradient(circle at 28% 72%, #A78BFA 0%, #2DD4BF 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(34) { background: radial-gradient(circle at 35% 65%, #A78BFA 0%, #A78BFA 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(35) { background: radial-gradient(circle at 94% 6%, #60A5FA 0%, #60A5FA 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(36) { background: radial-gradient(circle at 83% 17%, #A78BFA 0%, #60A5FA 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(37) { background: radial-gradient(circle at 79% 21%, #60A5FA 0%, #A78BFA 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(38) { background: radial-gradient(circle at 24% 76%, #A78BFA 0%, #60A5FA 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(39) { background: radial-gradient(circle at 11% 89%, #60A5FA 0%, #2DD4BF 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(40) { background: radial-gradient(circle at 23% 77%, #A78BFA 0%, #A78BFA 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(41) { background: radial-gradient(circle at 69% 31%, #2DD4BF 0%, #A78BFA 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(42) { background: radial-gradient(circle at 12% 88%, #A78BFA 0%, #2DD4BF 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(43) { background: radial-gradient(circle at 60% 40%, #60A5FA 0%, #60A5FA 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(44) { background: radial-gradient(circle at 2% 98%, #60A5FA 0%, #2DD4BF 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(45) { background: radial-gradient(circle at 35% 65%, #2DD4BF 0%, #60A5FA 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(46) { background: radial-gradient(circle at 87% 13%, #60A5FA 0%, #A78BFA 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(47) { background: radial-gradient(circle at 58% 42%, #A78BFA 0%, #A78BFA 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(48) { background: radial-gradient(circle at 16% 84%, #60A5FA 0%, #60A5FA 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(49) { background: radial-gradient(circle at 96% 4%, #A78BFA 0%, #A78BFA 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(50) { background: radial-gradient(circle at 32% 68%, #2DD4BF 0%, #2DD4BF 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(51) { background: radial-gradient(circle at 66% 34%, #2DD4BF 0%, #2DD4BF 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(52) { background: radial-gradient(circle at 52% 48%, #2DD4BF 0%, #60A5FA 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(53) { background: radial-gradient(circle at 94% 6%, #A78BFA 0%, #2DD4BF 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(54) { background: radial-gradient(circle at 16% 84%, #A78BFA 0%, #2DD4BF 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(55) { background: radial-gradient(circle at 30% 70%, #60A5FA 0%, #A78BFA 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(56) { background: radial-gradient(circle at 38% 62%, #A78BFA 0%, #A78BFA 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(57) { background: radial-gradient(circle at 28% 72%, #A78BFA 0%, #A78BFA 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(58) { background: radial-gradient(circle at 19% 81%, #60A5FA 0%, #2DD4BF 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(59) { background: radial-gradient(circle at 91% 9%, #60A5FA 0%, #2DD4BF 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(60) { background: radial-gradient(circle at 62% 38%, #2DD4BF 0%, #60A5FA 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(61) { background: radial-gradient(circle at 68% 32%, #60A5FA 0%, #60A5FA 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(62) { background: radial-gradient(circle at 55% 45%, #2DD4BF 0%, #A78BFA 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(63) { background: radial-gradient(circle at 42% 58%, #60A5FA 0%, #2DD4BF 70%, #0B1120 100%); }
.tj-doodle > i:nth-child(64) { background: radial-gradient(circle at 66% 34%, #2DD4BF 0%, #2DD4BF 70%, #0B1120 100%); }
</style>
<div class="tj-doodle">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>How to use CSS Doodle Generator
What this tool does
This CSS doodle generator builds a decorative pattern out of nothing but HTML and CSS. It lays out a grid of small elements and styles each one with gradients, shapes and transforms, so the finished artwork is drawn by the browser itself — there are no images involved. Choose a grid size, a colour scheme, a cell style and a randomness seed, and the preview updates with a live doodle made of real DOM cells. When you like what you see, copy a self-contained HTML and CSS snippet to paste into any page, or export a PNG.
Because the output is pure CSS, it is featherlight, stays sharp at any zoom, and never needs an image file. The page opens with a doodle already generated, so you can begin by pressing Regenerate and watching new variations appear.
When you’d use it
CSS doodles are a quick way to add personality to a web project without commissioning artwork or slowing the page down with image downloads. Front-end developers use them as hero backgrounds, empty-state illustrations, loading screens and section dividers. Designers use them to prototype a mood or texture before any real assets exist. Educators and students use them to teach CSS grid, gradients and transforms, because changing one value and seeing the doodle shift makes the properties tangible. Hobbyists and bloggers drop them behind headers or into 404 pages for a touch of character. The Truchet tile style in particular produces flowing, maze-like artwork that suits playful landing pages and game UIs. Anywhere a stylesheet runs, a CSS doodle can go.
How to use it
- The tool loads with a doodle already on screen. Set the Grid size slider — a small grid gives bold cells, a large grid a finer mosaic.
- Pick a Colour scheme; the first swatch becomes the background and the rest are used for the cell shapes.
- Choose a Cell style — gradient blobs, rotated triangles, circles, or Truchet quarter-circle tiles, each giving a very different character.
- Press Regenerate for a fresh random arrangement, or type a specific Randomness seed to reproduce a doodle you liked earlier.
- When you are happy, use Copy HTML + CSS to grab a self-contained snippet you can paste straight into a page.
- Use Download PNG when you need a flat image for a slide, document or social post.
Tips for great results
Grid size changes the whole feel: 4×4 reads as a bold poster, while 14×14 or
16×16 becomes an intricate mosaic. The Truchet style depends on cell rotation,
so larger grids let its curves connect into longer, more satisfying paths. If a
scheme feels too busy, the Mono scheme keeps things calm and is a safe choice
for backgrounds behind text. When you find a doodle you love, write down its
seed number — the same seed always rebuilds the exact design. For a web
background, copy the CSS rather than exporting a PNG: it stays crisp on every
display and adds no download weight. The snippet is plain, editable code, so
you can adjust the max-width, swap colours or change the shapes by hand once
it is in your project. Pair this with the
gradient generator to design a matching backdrop,
and the colour palette generator to build a custom
scheme. For other generative artwork, try the
spirograph generator for mathematical curves and the
pattern generator for seamless repeating tiles.
Privacy
Everything in this tool runs in your browser. The grid, the seeded randomness, the live preview, the HTML and CSS snippet and the PNG export are all generated by JavaScript on your own device. No design is uploaded, nothing is stored on a server, and there is no tracking of the doodles you create. When you close the tab the doodle is discarded unless you copied the code or saved the PNG, and once the page has loaded you can keep generating doodles completely offline.
Frequently asked questions
What is a CSS doodle?
What does the seed number do?
Should I copy the HTML and CSS or download the PNG?
Is my doodle private when I use this generator?
Can I use the generated doodles in my projects?
Related tools
Pattern Generator
Generate seamless geometric patterns.
Spirograph Generator
Generate hypnotic spirograph patterns.
Gradient Generator
Build linear, radial, and conic CSS gradients.
Noise Texture Generator
Generate subtle noise textures for backgrounds.
SVG Icon Generator
Generate simple SVG icons from basic shapes.
Color Converter
Convert colors between HEX, RGB, HSL, HSV, and CMYK.