`; }; const slider = (label,val,set,min,max,step,suffix) => h('div',{style:{marginBottom:10}}, h('div',{style:{display:'flex',justifyContent:'space-between',marginBottom:3}}, h('span',{style:{fontSize:10,color:'rgba(255,255,255,0.4)',fontFamily:'var(--font-mono)'}},label), h('span',{style:{fontSize:11,color:accent,fontFamily:'var(--font-mono)'}},val+(suffix||'')) ), h('input',{type:'range',min,max,step:step||1,value:val,onChange:e=>set(parseFloat(e.target.value)),style:{width:'100%',accentColor:accent}}) ); return h('div',{style:{minHeight:'100vh',background:'var(--bg-base)',fontFamily:'var(--font-body)'}}, h('header',{style:{borderBottom:'1px solid rgba(255,255,255,0.06)',padding:'14px 24px',display:'flex',alignItems:'center',justifyContent:'space-between',flexWrap:'wrap',gap:12}}, h('a',{href:'/',style:{textDecoration:'none',display:'flex',alignItems:'center',gap:8}},h('span',{style:{fontSize:20}},'⚡'),h('span',{style:{fontFamily:'var(--font-display)',fontWeight:700,fontSize:15,color:'#E8E8ED'}},'ULTIMATE DESIGN TOOLS')), h('nav',{style:{display:'flex',gap:6,fontSize:13,color:'rgba(255,255,255,0.3)',fontFamily:'var(--font-mono)'}},h('a',{href:'/',style:{color:'rgba(255,255,255,0.4)',textDecoration:'none'}},'Home'),' / ',h('a',{href:'/tools/category/css/',style:{color:'rgba(255,255,255,0.4)',textDecoration:'none'}},'CSS'),' / ',h('span',{style:{color:accent}},'Particles')) ), h('div',{style:{maxWidth:1100,margin:'0 auto',padding:'32px 20px'}}, h('h1',{style:{fontFamily:'var(--font-display)',fontSize:28,fontWeight:800,color:'#E8E8ED',marginBottom:8}},'Particle Background Generator'), h('p',{style:{color:'rgba(255,255,255,0.4)',marginBottom:24,fontSize:15}},'Create animated particle backgrounds with connections, mouse interaction, and custom colors. Copy the generated code.'), h('div',{style:{display:'grid',gridTemplateColumns:'250px 1fr',gap:20}}, h('div',null, slider('Particles',count,setCount,10,200,1,''), slider('Max Size',maxSize,setMaxSize,1,10,0.5,'px'), slider('Min Size',minSize,setMinSize,0.5,5,0.5,'px'), slider('Speed',speed,setSpeed,0.1,5,0.1,'×'), slider('Opacity',opacity,setOpacity,0.1,1,0.05,''), h('div',{style:{marginBottom:10}}, h('span',{style:{fontSize:10,color:'rgba(255,255,255,0.4)',fontFamily:'var(--font-mono)'}},'Shape'), h('div',{style:{display:'flex',gap:4,marginTop:4}},shapes.map(s=>h('button',{key:s,onClick:()=>setShape(s),style:{padding:'4px 10px',borderRadius:12,border:'1px solid '+(shape===s?accent:'rgba(255,255,255,0.08)'),background:shape===s?accent+'15':'transparent',color:shape===s?accent:'rgba(255,255,255,0.4)',fontSize:10,fontFamily:'var(--font-mono)',cursor:'pointer',textTransform:'capitalize'}},s))) ), h('label',{style:{display:'flex',alignItems:'center',gap:6,fontSize:11,color:'rgba(255,255,255,0.4)',fontFamily:'var(--font-mono)',cursor:'pointer',marginBottom:8}},h('input',{type:'checkbox',checked:connected,onChange:e=>setConnected(e.target.checked)}),'Connect lines'), connected && slider('Connect Dist',connectDist,setConnectDist,50,250,5,'px'), connected && slider('Line Opacity',lineOpacity,setLineOpacity,0.02,0.5,0.01,''), h('label',{style:{display:'flex',alignItems:'center',gap:6,fontSize:11,color:'rgba(255,255,255,0.4)',fontFamily:'var(--font-mono)',cursor:'pointer',marginBottom:8}},h('input',{type:'checkbox',checked:mouseInteract,onChange:e=>setMouseInteract(e.target.checked)}),'Mouse repel'), mouseInteract && slider('Mouse Radius',mouseRadius,setMouseRadius,50,200,5,'px'), h('div',{style:{display:'flex',gap:10,marginBottom:16}}, [{l:'Particles',v:color,s:setColor},{l:'Background',v:bgColor,s:setBgColor}].map(c=>h('div',{key:c.l}, h('span',{style:{fontSize:10,color:'rgba(255,255,255,0.4)',fontFamily:'var(--font-mono)'}},'',c.l), h('input',{type:'color',value:c.v,onChange:e=>c.s(e.target.value),style:{display:'block',width:40,height:28,border:'none',borderRadius:4,cursor:'pointer',marginTop:3}}) )) ), h('button',{onClick:()=>navigator.clipboard.writeText(genCode()),style:{padding:'10px 20px',background:accent,border:'none',borderRadius:8,color:'#0B0D17',fontWeight:700,cursor:'pointer',fontFamily:'var(--font-display)',fontSize:13,width:'100%'}},'Copy Code') ), h('div',null, h('div',{style:{position:'relative',borderRadius:12,overflow:'hidden',border:'1px solid rgba(255,255,255,0.06)',marginBottom:16}}, h('canvas',{ref:canvasRef,onMouseMove:e=>{const r=e.currentTarget.getBoundingClientRect(); mousePos.current={x:e.clientX-r.left,y:e.clientY-r.top};},onMouseLeave:()=>{mousePos.current={x:-999,y:-999};},style:{width:'100%',height:420,display:'block'}}) ), h('pre',{style:{background:'rgba(0,0,0,0.3)',border:'1px solid rgba(255,255,255,0.06)',borderRadius:10,padding:14,color:'#E8E8ED',fontSize:10,fontFamily:'var(--font-mono)',whiteSpace:'pre-wrap',lineHeight:1.4,maxHeight:200,overflow:'auto'}},genCode()) ) ) ) ); } // Mount ReactDOM.render(React.createElement(ToolApp), document.getElementById('root'));

Related Tools

View all 270 →
Gradient Generator
Try free →
Box Model Visualizer
Try free →
Shadow Generator
Try free →
Flexbox Playground
Try free →
Clip Path Maker
Try free →
Border Radius Lab
Try free →

What Is a Particle Background Generator?

A particle background generator creates animated, interactive particle systems for web pages. Particles are small dots or shapes that float, drift, and optionally connect with lines — creating a dynamic, modern visual effect popular on tech company landing pages, portfolio sites, and SaaS homepages.

This tool lets you configure every parameter — particle count, size, speed, opacity, color, connection line distance, and mouse interaction behavior — then preview the result live and export a complete, dependency-free code snippet ready for production.

How to Use This Tool

  1. Set particle properties — Choose the number of particles, their size range, speed, opacity, and color. Start with 60–80 particles for a balanced look that performs well.
  2. Configure connections — Set the maximum distance at which particles draw lines between each other. Shorter distances create a more subtle network effect; longer distances create a dense mesh.
  3. Enable interactivity — Turn on mouse-follow or mouse-repel behavior to make particles react to cursor movement. Adjust the interaction radius and strength.
  4. Export the code — Copy the generated HTML, CSS, and JavaScript. The output is a single self-contained snippet you can paste into any page.

Tips and Best Practices

Frequently Asked Questions

What is a particle background generator?+
A particle background generator creates animated particle effects for website hero sections, landing pages, and decorative backgrounds. Configure particle count, size, speed, color, connections, and interactivity — then export the code as a self-contained HTML/CSS/JS snippet.
Does this affect page performance?+
Performance depends on particle count and connection lines. For most use cases, 50–100 particles with moderate connection distance runs smoothly at 60fps on modern hardware. The tool shows a real-time FPS counter so you can optimize before exporting.
Can I make particles interactive?+
Yes. Enable mouse interaction to have particles respond to cursor movement — they can be attracted to, repelled from, or connected to the cursor position. Touch events work on mobile devices too.
What rendering method does it use?+
The tool uses HTML5 Canvas for rendering, which provides the best performance for large numbers of moving elements. The exported code is a lightweight vanilla JavaScript implementation with no external dependencies.
Can I use this with React or Vue?+
The exported code is framework-agnostic vanilla JS. You can wrap it in a React component using useEffect and useRef, or integrate it into any framework by mounting the canvas element in your component lifecycle.
How do I add a particle background to my site?+
Copy the generated code and paste it into your page. The canvas element is positioned as a fixed or absolute background layer. Your content sits on top with position:relative and a higher z-index.

📖 Learn More

Related Article CSS Animation & Easing Guide → Related Article CSS Noise & Textures Guide →

Built by Derek Giordano · Part of Ultimate Design Tools

Privacy Policy · Terms of Service