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
amazing-glass
Liquid glass web components for plain HTML, React and Vue that actually refract the page using Snell's law, with ten ready-made controls.
Why it made the list: Tuned pixel by pixel against Apple's renderer instead of faking glass with blur.
Liquid glassMIT@tomaccotomacco.github.io
- 02
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
- 03
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
- 04
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
- 05
CSS 3D Lab
Gallery of 135 live CSS 3D effects with how-it-works notes and paste-anywhere snippets, split into pure CSS versus CSS plus a little JS.
Why it made the list: Honest 3D on the web without WebGL, and every model ships a minimal snippet.
Modern CSS demosopen-sourceEdgaras Neverdauskas (@Evirtual)css3dlab.edgarasneverdauskas.com
- 06
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
- 07
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
- 08
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
- 09
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
- 10
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
- 11
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
- 12
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
- 13
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
- 14
g1455
Liquid Glass design system for Flutter with refraction, blur, tint and rim over the live backdrop; every component documented live with guide, code and API.
Why it made the list: Real liquid-glass refraction for Flutter apps, engineered for rendering cost first.
Liquid glassMIT@PlugFoxg1455.plugfox.dev
- 15
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
- 16
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
- 17
glassy-liquid
Liquid Glass control library for the web: nineteen iOS 26 style components with real refraction, as Web Components plus React, Vue and Svelte bindings, about 36 kB gzip.
Why it made the list: Actual refraction in Safari and Firefox via a WebGL scene, not just Chromium-only frost.
Liquid glassMIT@9und309und30.github.io
- 18
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
- 19
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
- 20
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
- 21
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
- 22
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
- 23
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
- 24
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
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.