The Vibeary — round-up
Best CSS background and glass effects
The cheapest visual upgrade available to any page is a background that is not flat white. Liquid glass and frosted panels, subtle particle fields, dot and grid patterns, animated meshes and the wilder modern-CSS demos all cost very little and change the feel of a page immediately. Everything here is close to copy-paste, and most of it is pure CSS — which means no dependency, no hydration cost and no third-party script to audit later.
What earned a place
- Mostly CSS, with JavaScript only where the effect demands it
- Cheap enough to run on a mobile GPU
- Readable source you can adapt to your tokens
- Degrades to something sensible without backdrop-filter
24 picks from the library
- 01
anchorpop
Self-positioning popovers built entirely on native CSS anchor positioning with no JavaScript positioning library.
Why it made the list: Shows anchor positioning replacing Floating UI, which most teams have not tried
Modern CSS demosMITJohannes Mutter (@johannesmutter)github.com
- 02
Aura
Ambient background gradients built from layered CSS blend modes to simulate coloured light spilling across a surface.
Why it made the list: Blend-mode approach gives glow that gradient generators cannot reproduce
Gradient backgroundsopen-sourceCristian Olivera (@CristianOlivera1)github.com
- 03
canvas-nest.js
Tiny canvas script that draws an interactive connected-node particle mesh behind page content, configured via script tag attributes.
Why it made the list: Configured entirely through data attributes on the script tag, so zero JS to write
Particle systemsMITHu Chen (@hustcc)github.com
- 04
CSS Pattern
157 background patterns built entirely from CSS gradients, each parameterised with custom properties for size and colour.
Why it made the list: No images, no SVG, no requests: patterns that are literally three lines of CSS
Background patternsfreeTemani Afif (@ChallengesCss)css-pattern.com
- 05
CSS Tip
Archive of three hundred plus short, demo-backed tips on modern CSS including masks, gradients, has() and scroll timelines.
Why it made the list: Each tip is a runnable one-minute technique, not a blog post about a technique
Modern CSS demosfreeTemani Afif (@ChallengesCss)css-tip.com
- 06
css-position-area-editor
Visual editor for previewing every CSS position-area value against an anchor, exporting the matching declaration.
Why it made the list: position-area has thirty odd values nobody memorises; this makes them visual
Modern CSS demosopen-sourceBurnworks (@burnworks)github.com
- 07
css.glass
Visual generator for glassmorphism panels that outputs backdrop-filter CSS with live blur, transparency, border and outline controls.
Why it made the list: The generator everyone screenshots but few know is open source and free
GlassmorphismfreeMike Tromba (@miketromba)css.glass
- 08
css.graphics
Gallery of classic 3D demos — cloth simulation, Menger sponge, black hole, chaotic attractors — rendered entirely with retained HTML and CSS.
Why it made the list: Proves CSS can do real-time 3D; a new scene lands every few days.
Modern CSS demosopen-sourceAgustin Capeletto (@layoutit)css.graphics
- 09
css3playground.com
Long-running collection of CSS experiments and toys covering transforms, filters, gradients and animation edge cases.
Why it made the list: Decade-deep archive of oddities from a developer who never stopped experimenting
Modern CSS demosopen-sourceChris Ruppel (@rupl)github.com
- 10
fireworks-js
Configurable fireworks particle library with React, Vue, Svelte and Angular bindings plus sound and trace controls.
Why it made the list: Better looking than confetti for celebration moments and framework-agnostic
Particle systemsMIT(@crashmax-dev)github.com
- 11
front-end-daily-challenges
One hundred seventy front-end challenges solved with pure CSS, covering art, effects, loaders and layout tricks.
Why it made the list: Enormous back catalogue of pure-CSS effects with step-by-step build notes
Modern CSS demosMIT(@comehope)github.com
- 12
Get Grid Information using pure CSS
Pure-CSS technique deriving a responsive grid's column count, row count and per-item coordinates using round(), sibling-count() and sibling-index().
Why it made the list: Grid introspection with zero JavaScript, and it composes with the new CSS if().
Modern CSS demosfreeTemani Afif (@t_afif)css-tip.com
- 13
glass-ui
CSS component library implementing the glassmorphism spec across cards, navbars, buttons and form controls.
Why it made the list: A whole design language rather than a one-off blur snippet
GlassmorphismMITThemesberg (@themesberg)github.com
- 14
gpu-io
GPU-accelerated compute library for browser physics, reaction-diffusion and particle simulations rendered to canvas.
Why it made the list: GPGPU made approachable; enables fluid and reaction-diffusion backgrounds
Particle systemsMITAmanda Ghassaei (@amandaghassaei)github.com
- 15
Gradient Magic
Gallery of unusual CSS gradients including patterned, striped and repeating conic effects, each with copyable source.
Why it made the list: Gradients that look nothing like the usual two-stop linear blur everyone ships
Gradient backgroundsfree(@GradientMagic)gradientmagic.com
- 16
gradii
Open-source generator for high-resolution gradient wallpapers and hero images with noise, grain and mesh controls.
Why it made the list: Grain and noise controls are what separate expensive gradients from cheap ones
Gradient backgroundsopen-sourceKeshav (@keshav-exe)github.com
- 17
Hero Patterns
Library of tileable SVG background patterns with live foreground colour and opacity controls, copied out as data-URI CSS.
Why it made the list: Steve Schoger's taste applied to backgrounds; free CC-BY and never bloated
Background patternsfreeSteve Schoger (@steveschoger)heropatterns.com
- 18
Hyalite
Real refraction liquid glass for the web using SDF lens maps, SVG displacement, and backdrop-filter — one file, no WebGL.
Why it made the list: Edges actually bend what's behind them; a live playground beats plain blur glassmorphism.
Liquid glassMIT@VII-Caevii-cae.github.io
- 19
Infinite Liquid Glass
WebGPU liquid-glass carousel demo with real-time refraction and chromatic dispersion, built on three.js TSL node materials.
Why it made the list: Dispersion and refraction that hold up in motion, not a backdrop-filter blur.
Liquid glassunknownSimon Hedlund (@shadersweden)infinite-liquid-glass.shader.se
- 20
isometric-css
Builds isometric projections from declarative HTML data attributes, turning flat elements into 3D-looking scenes.
Why it made the list: Isometric hero illustrations that stay real DOM, so they can be interactive
Modern CSS demosMIT(@elchininet)github.com
- 21
Liquid Orb Editor
Real-time WebGPU liquid-glass sphere editor with 11 presets, URL-hash parameter sharing, and export to standalone HTML or SwiftUI/Metal code.
Why it made the list: Same parameters export to web and to native Metal — rare cross-platform shader tool.
Liquid glassMITLerSent001github.com
- 22
liquid-css
CSS-only refractive chromatic aberration effect that fakes light dispersion through glass edges using layered filters.
Why it made the list: Tiny stylesheet that gets 80 percent of the glass look with no JS or WebGL
Liquid glassMITBrandon Jordan (@electrikmilk)github.com
- 23
liquid-glass (archisvaze)
Interactive browser demo of an iOS 26 style glass panel you can drag over page content to inspect the refraction math.
Why it made the list: Draggable demo makes the displacement-map technique legible in about a minute
Liquid glassopen-sourceArchis Vaze (@archisvaze)github.com
- 24
liquid-glass (nikdelvin)
Component set of LiquidGlass containers, LiquidText and LiquidButton built purely from CSS and SVG filter primitives.
Why it made the list: Zero JavaScript; works as plain CSS classes in any stack including email-ish HTML
Liquid glassopen-sourceNik Delvin (@nikdelvin)github.com
Questions
- Is backdrop-filter safe to use now?
- Broadly yes, but always define a solid fallback background so unsupported or low-power contexts stay legible.
- Do animated backgrounds hurt performance?
- They can. Animate transform and opacity only, keep the painted area modest, and pause animation when the tab is hidden.