Free tools / Particle background
Free particle background generator
Build a starfield or particle background: set the count, size, depth and colors, then copy the CSS, HTML or SVG or download a PNG. Static output, no sign-up.
The preview runs the CSS you copy, scaled to fit. Particles sit inside a 1440×900px area; set it to your section size.
Starter presets
Capped at 600 particles so the copied CSS stays small. Put your content inside the stars element; the particles sit behind it. The PNGs use the same seed, colors and density; at a different size than the area they place the particles afresh.
What is a particle or starfield background?
It is a field of small dots scattered behind your content: stars on a night sky, embers, snow, dust or plain specks on a dark section. Placed at random rather than on a grid, the dots read as depth. Layers of different sizes and opacities strengthen that: small dim dots look far away, larger brighter ones look close.
How the box-shadow technique works
The CSS draws one tiny element, a ::before pseudo-element a pixel or two wide, and gives it a long box-shadow list. Each entry is an x offset, a y offset and a color, and each one paints a copy of that tiny element somewhere else. So one element becomes hundreds of dots, with no images and no JavaScript. Three layers use three pseudo-elements, which is why the output has a stars-near helper element.
The trade-off is size and paint cost. Every particle is text in your stylesheet, and the browser repaints the shadows when the element changes, so a few hundred is comfortable and thousands are not; that is why this tool stops at 600. A canvas or WebGL background handles far more particles and can animate every one, but it needs a script. For a still or lightly twinkling backdrop, box-shadows are the lighter choice.
Use the output on your site
- Webflow: add an Embed with the HTML + CSS output inside a section, or paste the CSS into a page’s custom code and give the section the
starsclass. Webflow effects. - Framer: paste the CSS into Site Settings, Custom Code, in a
<style>tag, and add the class to the frame. Framer effects. - WordPress: give a Group block the
starsclass and paste the CSS into Appearance, Customize, Additional CSS. WordPress effects. - Shopify: paste the CSS into
base.cssand add the class to your section. Shopify effects. - React: put the CSS in a stylesheet and render
<section className="stars">, or inline the SVG behind your content. React effects.
Want the particles to move? The how-to for a WebGL particle animation in Webflow and Framer covers it, or see the full list of web effects. Also free: dot grid generator.
Frequently asked questions
- Is the particle background generator free?
- Yes. There is no sign-up, no watermark and no limit. Everything runs in your browser, and the colors you pick are not uploaded.
- Can I use the backgrounds commercially?
- Yes. The CSS, HTML, SVG and PNG files you generate are yours to use on personal and client projects, with no attribution required.
- Why is the particle count capped at 600?
- Every particle is one box-shadow entry in the CSS you copy, so 600 particles is already tens of kilobytes of text. Beyond that the stylesheet gets heavy and a canvas or WebGL background is the better tool.
- Will the same settings give me the same stars every time?
- Yes. The positions come from a seeded random generator, so a seed and a set of settings always produce the same output, in the CSS, the SVG and the PNG. Press Shuffle for a new layout, and copy the link to share exact settings.
- Can the particles move or form shapes?
- Only a little here: the optional twinkle and drift are plain CSS animations, off by default and switched off for visitors who prefer reduced motion. For particles that morph between shapes and react to the cursor, see Particle Forms. See Particle Forms.