---
title: "the Vibing Company"
canonical: "https://vibing.inc/library/c/backgrounds-effects-and-css-oddities"
site: "the Vibing Company"
---

The Vibeary — collection

# Backgrounds, Effects & CSS Oddities

Pure-CSS territory: liquid glass, particle systems, text effects, animated backgrounds and the modern-CSS demos that make you re-read the spec. Cheap to add, disproportionately effective, and mostly copy-paste.

[Search all gems](https://vibing.inc/library)[Newest additions](https://vibing.inc/library/new)

## Inside Backgrounds, Effects & CSS Oddities

- Liquid glass 12
- Modern CSS demos 10
- Particle systems 8
- Text effects 8
- Hover effects 7
- Dithering & pixel 6
- Gradient backgrounds 5
- Scroll effects 5

## Gems in this collection

[### CSS Pattern 157 background patterns built entirely from CSS gradients, each parameterised with custom properties for size and colour. Temani Afif (@ChallengesCss) free](https://vibing.inc/library/css-pattern-vg-0118)[### tsParticles TypeScript particle engine with presets for confetti, fireworks, links and polygon masks, plus React, Vue, Svelte and Angular wrappers. Matteo Bruni (@matteobruni) MIT](https://vibing.inc/library/tsparticles-vg-0182)[### ShaderGradient Animated 3D gradient meshes exportable as React components, Figma fills or Framer layers with camera and colour controls. ShaderGradient team freemium](https://vibing.inc/library/shadergradient-vg-0150)[### SVG Backgrounds Collection of customisable SVG backgrounds, shape dividers, doodles and preloaders with export presets for Webflow, Elementor and plain CSS. Matt Visiwig freemium](https://vibing.inc/library/svg-backgrounds-vg-0120)[### liquid-glass (nikdelvin) Component set of LiquidGlass containers, LiquidText and LiquidButton built purely from CSS and SVG filter primitives. Nik Delvin (@nikdelvin) open-source](https://vibing.inc/library/liquid-glass-nikdelvin-vg-0158)[### fireworks-js Configurable fireworks particle library with React, Vue, Svelte and Angular bindings plus sound and trace controls. (@crashmax-dev) MIT](https://vibing.inc/library/fireworks-js-vg-0176)[### glitched-writer Text writing module that decodes strings through configurable glitch, scramble and error passes with presets. Damian Tarnawski (@thetarnav) MIT](https://vibing.inc/library/glitched-writer-vg-0193)[### Hover3D.js Minimal 3D hover effect that tilts an element and shifts inner layers based on cursor position, aimed at product cards. Oleg Frolov (@Volorf) MIT](https://vibing.inc/library/hover3d-js-vg-0110)[### liquidGL Runtime glassmorphism layer that samples the page behind an element and renders real refraction, blur and specular highlights in WebGL. NaughtyDuk (@naughtyduk) open-source](https://vibing.inc/library/liquidgl-vg-0162)[### vaso React component wrapping the liquid glass effect with props for blur radius, refraction strength and edge highlight. Jiachi Liu (@huozhi) MIT](https://vibing.inc/library/vaso-vg-0164)[### gpu-io GPU-accelerated compute library for browser physics, reaction-diffusion and particle simulations rendered to canvas. Amanda Ghassaei (@amandaghassaei) MIT](https://vibing.inc/library/gpu-io-vg-0177)[### liquid-glass-js Apple-inspired glass effects library exposing displacement, blur and highlight layers as a plain JavaScript API. Armagan Amcalar (@dashersw) MIT](https://vibing.inc/library/liquid-glass-js-vg-0160)[### Proton Particle animation engine for canvas, WebGL and DOM with emitters, behaviours, forces and zones borrowed from VFX pipelines. (@drawcall) MIT](https://vibing.inc/library/proton-vg-0180)[### Cool Backgrounds Aggregated generators producing triangle mesh, particle, topographic gradient and photo-based hero background images for download. Side Project Collective free](https://vibing.inc/library/cool-backgrounds-vg-0116)[### liquid-glass (archisvaze) Interactive browser demo of an iOS 26 style glass panel you can drag over page content to inspect the refraction math. Archis Vaze (@archisvaze) open-source](https://vibing.inc/library/liquid-glass-archisvaze-vg-0157)[### CSS Loaders Over six hundred loading animations, each built from a single div using only CSS and custom properties. Temani Afif (@ChallengesCss) free](https://vibing.inc/library/css-loaders-vg-0125)[### ditherer Browser tool for image and video dithering, glitch art and retro CRT/VHS filtering with layered effect chains. (@gyng) open-source](https://vibing.inc/library/ditherer-vg-0134)[### Atropos Touch-friendly 3D parallax hover component that separates layers by depth, with vanilla, React, Vue and Svelte builds. Vladimir Kharlampidi (@nolimits4web) MIT](https://vibing.inc/library/atropos-vg-0109)[### liquid-css CSS-only refractive chromatic aberration effect that fakes light dispersion through glass edges using layered filters. Brandon Jordan (@electrikmilk) MIT](https://vibing.inc/library/liquid-css-vg-0156)[### pokemon-cards-css Advanced CSS recreations of holographic, foil, galaxy and reverse-holo trading card finishes driven by pointer position. Simon Goellner (@simeydotme) MIT](https://vibing.inc/library/pokemon-cards-css-vg-0111)[### liquidglass (ybouane) Framework-agnostic web library producing glass surfaces with realistic refraction, chromatic edges and configurable blur falloff. (@ybouane) open-source](https://vibing.inc/library/liquidglass-ybouane-vg-0163)[### liquid-glass (shuding) Single-file copy-paste Apple-style liquid glass shader built from SVG displacement filters, no framework or build step required. Shu Ding (@shuding_) MIT](https://vibing.inc/library/liquid-glass-shuding-vg-0159)[### Mouse Animations Framework-agnostic TypeScript library of cursor and mouse effects including trails, ripples and follower shapes. (@tgomilar) MIT](https://vibing.inc/library/mouse-animations-vg-0130)[### PowerGlitch Tiny library that glitches any DOM element or image with configurable slice count, timing and chromatic offset. (@7PH) MIT](https://vibing.inc/library/powerglitch-vg-0142)[### use-scramble React hook producing randomised scramble and decrypt text transitions with tick rate, speed and character-set controls. (@tol-is) MIT](https://vibing.inc/library/use-scramble-vg-0199)[### Image-to-Braille Converts images into Unicode braille characters, giving a text-only dithered rendering that works anywhere text does. (@505e06b2) open-source](https://vibing.inc/library/image-to-braille-vg-0136)[### phenomenon Two-kilobyte low-level WebGL wrapper designed for instanced particle scenes with custom shaders and no scene graph. Colin van Eenige (@vaneenige) MIT](https://vibing.inc/library/phenomenon-vg-0179)[### Apollo Custom cursor library with hover targets, magnetic snapping and state machines for element-specific cursor modes. Adoratorio Studio (@Adoratorio) MIT](https://vibing.inc/library/apollo-vg-0129)[### react-scroll-parallax React hooks and components for scroll-linked parallax on elements, banners and backgrounds with easing and rotation. J Scott Smith (@jscottsmith) MIT](https://vibing.inc/library/react-scroll-parallax-vg-0185)[### css-art-gallery Gallery of CSS-only artworks with source for each piece, browsable as a single site. Salil Naik (@salil-naik) MIT](https://vibing.inc/library/css-art-gallery-vg-0123)[### isometric-css Builds isometric projections from declarative HTML data attributes, turning flat elements into 3D-looking scenes. (@elchininet) MIT](https://vibing.inc/library/isometric-css-vg-0172)[### gradii Open-source generator for high-resolution gradient wallpapers and hero images with noise, grain and mesh controls. Keshav (@keshav-exe) open-source](https://vibing.inc/library/gradii-vg-0148)[### react-particle-effect-button React button that bursts into particles on click, with configurable shapes, direction and easing for the disintegration. Travis Fischer (@transitive_bs) MIT](https://vibing.inc/library/react-particle-effect-button-vg-0181)[### 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. LerSent001 MIT](https://vibing.inc/library/liquid-orb-editor-vg-2008)[### css-houdini-blobs CSS Paint Worklet that renders randomised organic blob shapes as element backgrounds with seed and complexity properties. Bramus Van Damme (@bramus) MIT](https://vibing.inc/library/css-houdini-blobs-vg-0127)[### react-kino Scroll-driven cinematic storytelling primitives for React under one kilobyte gzipped, built on native scroll timelines. Bilal Tahir (@btahir) MIT](https://vibing.inc/library/react-kino-vg-0184)[### glitchGL Universal WebGL glitch effect layer that applies RGB split, slice and noise passes over existing page elements. NaughtyDuk (@naughtyduk) open-source](https://vibing.inc/library/glitchgl-vg-0141)[### mantine-border-animate Mantine component providing beam, glow, gradient and pulse animated borders with full colour and timing control. Giovambattista Fazioli (@gfazioli) MIT](https://vibing.inc/library/mantine-border-animate-vg-0114)[### awesome-css-art Curated list of CSS art projects, tutorials, artists and challenges built entirely without images. Manz (@ManzDev) open-source](https://vibing.inc/library/awesome-css-art-vg-0122)[### as-dithered-image HTML custom element that dithers images at device pixel resolution so results stay crisp on any display and zoom level. Andrew Stephens (@andrewstephens75) MIT](https://vibing.inc/library/as-dithered-image-vg-0132)[### direction-reveal Detects which edge the cursor entered or left an element from and reveals overlay content from that direction. Nigel O'Toole (@NigelOToole) MIT](https://vibing.inc/library/direction-reveal-vg-0152)[### fluidkit React library for liquid glass and metaball UI animations, including morphing nav indicators and blob transitions. Vendo (@runvendo) open-source](https://vibing.inc/library/fluidkit-vg-0144)[### AnimateSVGTextPath Codrops demo animating SVG text along a curved path as it scrolls into view via IntersectionObserver. Codrops / Manoela Ilic (@crnacura) MIT](https://vibing.inc/library/animatesvgtextpath-vg-0192)[### You-need-to-know-css Reference of CSS techniques and edge-case tricks with live demos, covering effects, transitions and layout behaviour. (@l-hammer) MIT](https://vibing.inc/library/you-need-to-know-css-vg-0174)[### css3playground.com Long-running collection of CSS experiments and toys covering transforms, filters, gradients and animation edge cases. Chris Ruppel (@rupl) open-source](https://vibing.inc/library/css3playground-com-vg-0170)[### DistortedLinkEffects Decorative link hover distortions built with SVG turbulence and displacement filters rather than canvas or WebGL. Codrops / Manoela Ilic (@crnacura) MIT](https://vibing.inc/library/distortedlinkeffects-vg-0153)[### meshgrad Generates CSS mesh gradients as layered radial-gradient stacks, with a React helper for randomised output. Cristi Cretu (@cristicretu) MIT](https://vibing.inc/library/meshgrad-vg-0149)[### svg-color-filter Interactive explainer and playground for SVG feColorMatrix, showing how each matrix cell changes an image. Claudio Holanda (@kazzkiq) MIT](https://vibing.inc/library/svg-color-filter-vg-0190)[### ditherjs Small library that dithers any img element to a fixed palette using ordered or error-diffusion algorithms. Daniele Piccone (@danielepiccone) MIT](https://vibing.inc/library/ditherjs-vg-0135)[### glitch-studio Data-bending and glitch toolkit with sorting, channel shifting and byte corruption effects plus batch processing. Alex Adam (@alexadam) open-source](https://vibing.inc/library/glitch-studio-vg-0140)[### Aura Ambient background gradients built from layered CSS blend modes to simulate coloured light spilling across a surface. Cristian Olivera (@CristianOlivera1) open-source](https://vibing.inc/library/aura-vg-0146)[### expo-electric-border Crackling lightning outline drawn around any React Native view on the UI thread using Skia and Reanimated. Mahdi Davoodi (@mahdidavoodi7) MIT](https://vibing.inc/library/expo-electric-border-vg-0113)[### morphin Generates pixel-art sprite interpolations rendered as CSS animations, producing sprite morphs without a canvas. Javier Bórquez (@javierbyte) MIT](https://vibing.inc/library/morphin-vg-0137)[### geometric-paint-worklet Customisable Paint Worklet drawing geometric figures into any element background via CSS custom properties. (@boguz) MIT](https://vibing.inc/library/geometric-paint-worklet-vg-0128)[### tw-fade Tailwind v4 plugin adding scroll-edge fade masking to overflow containers with zero JavaScript. (@petekp) MIT](https://vibing.inc/library/tw-fade-vg-0187)[### puffin.js Image hover library that reveals a second image through an animated organic mask following the cursor. (@Treast) MIT](https://vibing.inc/library/puffin-js-vg-0155)[### Tilt.js Sub-4KB parallax tilt hover effect with glare, gyroscope support and per-axis limits, driven by data attributes. Gijs Rogé (@gijsroge) MIT](https://vibing.inc/library/tilt-js-vg-0112)[### ShaderExpo Browser WebGL shader playground for writing, previewing and sharing fragment shaders used as page backgrounds. Anurag Hazra (@anuraghazra) MIT](https://vibing.inc/library/shaderexpo-vg-0188)[### tegaki Renders any web font as animated handwriting strokes, turning ordinary text into a hand-drawn reveal. (@gkurt) MIT](https://vibing.inc/library/tegaki-vg-0197)[### canvas-nest.js Tiny canvas script that draws an interactive connected-node particle mesh behind page content, configured via script tag attributes. Hu Chen (@hustcc) MIT](https://vibing.inc/library/canvas-nest-js-vg-0175)[### Dither (Shpigford) Vector dithering tool that converts images into scalable dithered vector art for the web and Adobe Illustrator. Josh Pigford (@Shpigford) open-source](https://vibing.inc/library/dither-shpigford-vg-0133)[### css-position-area-editor Visual editor for previewing every CSS position-area value against an anchor, exporting the matching declaration. Burnworks (@burnworks) open-source](https://vibing.inc/library/css-position-area-editor-vg-0169)[### particles.js (marcbruederlin) Dependency-free responsive particle background plugin with configurable density, connection lines and interaction modes. Marc Brüderlin (@marcbruederlin) MIT](https://vibing.inc/library/particles-js-marcbruederlin-vg-0178)[### TypeIt Typewriter engine with queued strings, mid-string deletions, nested instances and full control over speed and cursor. Alex MacArthur (@amacarthur) GPL](https://vibing.inc/library/typeit-vg-0198)[### animere Scroll-triggered animation runner that drives Animate.css classes via IntersectionObserver with no configuration. Johann Schopplich (@johannschopplich) MIT](https://vibing.inc/library/animere-vg-0183)[### CSS Tip Archive of three hundred plus short, demo-backed tips on modern CSS including masks, gradients, has() and scroll timelines. Temani Afif (@ChallengesCss) free](https://vibing.inc/library/css-tip-vg-0168)[### gooey-react Half-kilobyte React component applying the SVG gooey filter so overlapping shapes blob together like liquid metal. Luuk de Vlieger (@luukdv) MIT](https://vibing.inc/library/gooey-react-vg-0145)[### simpleParallax.js Applies parallax to images by transforming and scaling them within their container, avoiding layout shift. Geoffrey Signorato (@geosigno) MIT](https://vibing.inc/library/simpleparallax-js-vg-0186)[### crt-css Pure CSS CRT monitor effect adding scanlines, screen curvature, flicker and phosphor glow to any container. (@D3nn7) open-source](https://vibing.inc/library/crt-css-vg-0121)[### front-end-daily-challenges One hundred seventy front-end challenges solved with pure CSS, covering art, effects, loaders and layout tricks. (@comehope) MIT](https://vibing.inc/library/front-end-daily-challenges-vg-0171)[### voronoi (WebSVG) Parametric Voronoi pattern generator with real-time editing and SVG export for backgrounds and dividers. WebSVG (@WebSVG) open-source](https://vibing.inc/library/voronoi-websvg-vg-0117)[### glass-ui CSS component library implementing the glassmorphism spec across cards, navbars, buttons and form controls. Themesberg (@themesberg) MIT](https://vibing.inc/library/glass-ui-vg-0139)[### svg-filter-editor Node-based visual editor for composing SVG filter graphs, exporting the resulting filter markup. Vlad Poletaev (@poletaevvlad) open-source](https://vibing.inc/library/svg-filter-editor-vg-0191)[### smooth-cursor Physics-based smooth cursor component for React with spring stiffness, damping and rotation-on-velocity options. Parth (@Code-Parth) MIT](https://vibing.inc/library/smooth-cursor-vg-0131)[### awesome-css-houdini Curated index of CSS Houdini worklets, polyfills, specs, talks and experiments across the Paint, Layout and Typed OM APIs. CSSHoudini (@CSSHoudini) open-source](https://vibing.inc/library/awesome-css-houdini-vg-0126)[### griffo Kerning-aware text splitting for React that preserves letter-spacing when splitting into characters for staggered animation. (@dimicx) MIT](https://vibing.inc/library/griffo-vg-0194)[### CSS Generators Twenty parameterised generators for CSS-only shapes, ribbons, tooltips, gradient shadows, section dividers and fancy borders. Temani Afif (@ChallengesCss) free](https://vibing.inc/library/css-generators-vg-0124)[### Squircle by Space UI Tailwind plugin rendering true superellipse squircles via the CSS Houdini Paint Worklet, with adjustable smoothing and rounded-corner fallback. Space UI MIT](https://vibing.inc/library/squircle-by-space-ui-vg-2014)[### react-fast-marquee React marquee component using pure CSS animation with pause-on-hover, gradient edges, direction and speed props. Justin Chu (@justin-chu) MIT](https://vibing.inc/library/react-fast-marquee-vg-0166)[### dynamic-marquee Marquee library where items can be added and removed while scrolling, supporting arbitrary DOM nodes and directions. Tom Jenkinson (@tjenkinson) MIT](https://vibing.inc/library/dynamic-marquee-vg-0165)[### anchorpop Self-positioning popovers built entirely on native CSS anchor positioning with no JavaScript positioning library. Johannes Mutter (@johannesmutter) MIT](https://vibing.inc/library/anchorpop-vg-0167)[### btns Collection of buttons with unusual hover effects, each implemented as isolated copy-paste HTML and CSS. Enjeck Cleopatra (@enjeck) MIT](https://vibing.inc/library/btns-vg-0151)[### svg-text-animate Converts text into SVG stroke paths and animates the drawing, supporting custom fonts and per-letter timing. (@oubenruing) MIT](https://vibing.inc/library/svg-text-animate-vg-0196)[### smart-ticker Diff-aware animated number and text ticker for React, Vue and Svelte that only animates changed characters. (@tombcato) MIT](https://vibing.inc/library/smart-ticker-vg-0195)[### Hero Patterns Library of tileable SVG background patterns with live foreground colour and opacity controls, copied out as data-URI CSS. Steve Schoger (@steveschoger) free](https://vibing.inc/library/hero-patterns-vg-0119)[### react-ai-orb Pure-CSS glowing React orb with eight palettes, eight presets, live speed control and reduced-motion respect, no canvas or WebGL. @88lin MIT](https://vibing.inc/library/react-ai-orb-vg-2200)[### Hyalite Real refraction liquid glass for the web using SDF lens maps, SVG displacement, and backdrop-filter — one file, no WebGL. @VII-Cae MIT](https://vibing.inc/library/hyalite-vg-2194)[### Images in motion Tiny open-source mosaic of inclined image columns that scroll opposite ways, driven by one CSS keyframe per lane with optional React and Vue mounts. smartsquad MIT](https://vibing.inc/library/images-in-motion-vg-2166)[### css.graphics Gallery of classic 3D demos — cloth simulation, Menger sponge, black hole, chaotic attractors — rendered entirely with retained HTML and CSS. Agustin Capeletto (@layoutit) open-source](https://vibing.inc/library/css-graphics-vg-2142)[### topolines One React component that draws animated topographic contour backgrounds on the GPU, with six presets and a live playground. Alex (@idleCyrex) MIT](https://vibing.inc/library/topolines-vg-2136)[### revealed WebGL library that stacks two images and lets the pointer, scroll or your own state paint a noise-carved hole through the top one. Alex (@idleCyrex) MIT](https://vibing.inc/library/revealed-vg-2135)[### Meniscus Bottom navigation bar whose top edge behaves like a liquid surface: one parametric SVG trough that leans and shallows with travel speed. Zero dependencies. @hasib41 MIT](https://vibing.inc/library/meniscus-vg-2134)[### CSS Button Library 99 button hover effects in pure CSS with no JavaScript or dependencies; each snippet uses one colour token and respects prefers-reduced-motion. Colorion MIT](https://vibing.inc/library/css-button-library-vg-2112)[### Payment Method Animation Checkout demo where the credit card is the form: it embosses as you type, flips for CVC, flies to centre on submit. @hasib41 MIT](https://vibing.inc/library/payment-method-animation-vg-2074)[### 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(). Temani Afif (@t_afif) free](https://vibing.inc/library/get-grid-information-using-pure-css-vg-2034)[### Infinite Liquid Glass WebGPU liquid-glass carousel demo with real-time refraction and chromatic dispersion, built on three.js TSL node materials. Simon Hedlund (@shadersweden) unknown](https://vibing.inc/library/infinite-liquid-glass-vg-2033)[### Abyssal Ocean Real-time spectral FFT ocean in a single HTML file: WebGL2 and three.js, JONSWAP/TMA spectrum, three cascades, foam, caustics, underwater view. @squall01337 MIT](https://vibing.inc/library/abyssal-ocean-vg-2026)[### Gradient Magic Gallery of unusual CSS gradients including patterned, striped and repeating conic effects, each with copyable source. (@GradientMagic) free](https://vibing.inc/library/gradient-magic-vg-0147)[### phuocng/css-animation Showcases of popular CSS animations reimplemented without any animation library, each with annotated source. Phuoc Nguyen (@phuocng) MIT](https://vibing.inc/library/phuocng-css-animation-vg-0173)[### css.glass Visual generator for glassmorphism panels that outputs backdrop-filter CSS with live blur, transparency, border and outline controls. Mike Tromba (@miketromba) free](https://vibing.inc/library/css-glass-vg-0138)[### Nephele React tool for generating volumetric cloud textures from layered SVG turbulence filters. (@beauhaus) MIT](https://vibing.inc/library/nephele-vg-0189)[### Hover.dev Library of animated React and Tailwind components including glow buttons, spotlight cards, marquees and hero effects. Tom (@tomisloading) freemium](https://vibing.inc/library/hover-dev-vg-0115)[### liquid-glass-studio WebGL2 and WebGPU recreation of Apple's liquid glass with tunable refraction, dispersion, blur and shadow parameters in a live playground. (@iyinchao) open-source](https://vibing.inc/library/liquid-glass-studio-vg-0161)[### Supermosh Browser-based datamoshing tool that produces pixel-bleed and I-frame removal video glitches without desktop software. Supermosh open-source](https://vibing.inc/library/supermosh-vg-0143)[### Drift Zoom-on-hover for product images with a detached pane, inline mode and no dependencies. Straw Dynamics (@strawdynamics) MIT](https://vibing.inc/library/drift-vg-0154)


---

Source: https://vibing.inc/library/c/backgrounds-effects-and-css-oddities · Agent docs: https://vibing.inc/for-agents · MCP: https://vibing.inc/api/public/mcp