Backgrounds, Effects & CSS Oddities

157 background patterns built entirely from CSS gradients, each parameterised with custom properties for size and colour.

TypeScript particle engine with presets for confetti, fireworks, links and polygon masks, plus React, Vue, Svelte and Angular wrappers.

Animated 3D gradient meshes exportable as React components, Figma fills or Framer layers with camera and colour controls.

Collection of customisable SVG backgrounds, shape dividers, doodles and preloaders with export presets for Webflow, Elementor and plain CSS.

Component set of LiquidGlass containers, LiquidText and LiquidButton built purely from CSS and SVG filter primitives.

Configurable fireworks particle library with React, Vue, Svelte and Angular bindings plus sound and trace controls.

Text writing module that decodes strings through configurable glitch, scramble and error passes with presets.

Minimal 3D hover effect that tilts an element and shifts inner layers based on cursor position, aimed at product cards.

Runtime glassmorphism layer that samples the page behind an element and renders real refraction, blur and specular highlights in WebGL.

React component wrapping the liquid glass effect with props for blur radius, refraction strength and edge highlight.

GPU-accelerated compute library for browser physics, reaction-diffusion and particle simulations rendered to canvas.

Apple-inspired glass effects library exposing displacement, blur and highlight layers as a plain JavaScript API.

Particle animation engine for canvas, WebGL and DOM with emitters, behaviours, forces and zones borrowed from VFX pipelines.

Aggregated generators producing triangle mesh, particle, topographic gradient and photo-based hero background images for download.

Interactive browser demo of an iOS 26 style glass panel you can drag over page content to inspect the refraction math.

Over six hundred loading animations, each built from a single div using only CSS and custom properties.

Browser tool for image and video dithering, glitch art and retro CRT/VHS filtering with layered effect chains.

Touch-friendly 3D parallax hover component that separates layers by depth, with vanilla, React, Vue and Svelte builds.

CSS-only refractive chromatic aberration effect that fakes light dispersion through glass edges using layered filters.

Advanced CSS recreations of holographic, foil, galaxy and reverse-holo trading card finishes driven by pointer position.

Framework-agnostic web library producing glass surfaces with realistic refraction, chromatic edges and configurable blur falloff.

Single-file copy-paste Apple-style liquid glass shader built from SVG displacement filters, no framework or build step required.

Framework-agnostic TypeScript library of cursor and mouse effects including trails, ripples and follower shapes.

Tiny library that glitches any DOM element or image with configurable slice count, timing and chromatic offset.

React hook producing randomised scramble and decrypt text transitions with tick rate, speed and character-set controls.

Converts images into Unicode braille characters, giving a text-only dithered rendering that works anywhere text does.

Two-kilobyte low-level WebGL wrapper designed for instanced particle scenes with custom shaders and no scene graph.

Custom cursor library with hover targets, magnetic snapping and state machines for element-specific cursor modes.

React hooks and components for scroll-linked parallax on elements, banners and backgrounds with easing and rotation.

Gallery of CSS-only artworks with source for each piece, browsable as a single site.

Builds isometric projections from declarative HTML data attributes, turning flat elements into 3D-looking scenes.

Open-source generator for high-resolution gradient wallpapers and hero images with noise, grain and mesh controls.

React button that bursts into particles on click, with configurable shapes, direction and easing for the disintegration.

Real-time WebGPU liquid-glass sphere editor with 11 presets, URL-hash parameter sharing, and export to standalone HTML or SwiftUI/Metal code.

CSS Paint Worklet that renders randomised organic blob shapes as element backgrounds with seed and complexity properties.

Scroll-driven cinematic storytelling primitives for React under one kilobyte gzipped, built on native scroll timelines.

Universal WebGL glitch effect layer that applies RGB split, slice and noise passes over existing page elements.

Mantine component providing beam, glow, gradient and pulse animated borders with full colour and timing control.

Curated list of CSS art projects, tutorials, artists and challenges built entirely without images.

HTML custom element that dithers images at device pixel resolution so results stay crisp on any display and zoom level.

Detects which edge the cursor entered or left an element from and reveals overlay content from that direction.

React library for liquid glass and metaball UI animations, including morphing nav indicators and blob transitions.

Codrops demo animating SVG text along a curved path as it scrolls into view via IntersectionObserver.

Reference of CSS techniques and edge-case tricks with live demos, covering effects, transitions and layout behaviour.

Long-running collection of CSS experiments and toys covering transforms, filters, gradients and animation edge cases.

Decorative link hover distortions built with SVG turbulence and displacement filters rather than canvas or WebGL.

Generates CSS mesh gradients as layered radial-gradient stacks, with a React helper for randomised output.

Interactive explainer and playground for SVG feColorMatrix, showing how each matrix cell changes an image.

Small library that dithers any img element to a fixed palette using ordered or error-diffusion algorithms.

Data-bending and glitch toolkit with sorting, channel shifting and byte corruption effects plus batch processing.

Ambient background gradients built from layered CSS blend modes to simulate coloured light spilling across a surface.

Crackling lightning outline drawn around any React Native view on the UI thread using Skia and Reanimated.

Generates pixel-art sprite interpolations rendered as CSS animations, producing sprite morphs without a canvas.

Customisable Paint Worklet drawing geometric figures into any element background via CSS custom properties.

Tailwind v4 plugin adding scroll-edge fade masking to overflow containers with zero JavaScript.

Image hover library that reveals a second image through an animated organic mask following the cursor.

Sub-4KB parallax tilt hover effect with glare, gyroscope support and per-axis limits, driven by data attributes.

Browser WebGL shader playground for writing, previewing and sharing fragment shaders used as page backgrounds.

Renders any web font as animated handwriting strokes, turning ordinary text into a hand-drawn reveal.

Tiny canvas script that draws an interactive connected-node particle mesh behind page content, configured via script tag attributes.

Vector dithering tool that converts images into scalable dithered vector art for the web and Adobe Illustrator.

Visual editor for previewing every CSS position-area value against an anchor, exporting the matching declaration.

Dependency-free responsive particle background plugin with configurable density, connection lines and interaction modes.

Typewriter engine with queued strings, mid-string deletions, nested instances and full control over speed and cursor.

Scroll-triggered animation runner that drives Animate.css classes via IntersectionObserver with no configuration.

Archive of three hundred plus short, demo-backed tips on modern CSS including masks, gradients, has() and scroll timelines.

Half-kilobyte React component applying the SVG gooey filter so overlapping shapes blob together like liquid metal.

Applies parallax to images by transforming and scaling them within their container, avoiding layout shift.

Pure CSS CRT monitor effect adding scanlines, screen curvature, flicker and phosphor glow to any container.

One hundred seventy front-end challenges solved with pure CSS, covering art, effects, loaders and layout tricks.

Parametric Voronoi pattern generator with real-time editing and SVG export for backgrounds and dividers.

CSS component library implementing the glassmorphism spec across cards, navbars, buttons and form controls.

Node-based visual editor for composing SVG filter graphs, exporting the resulting filter markup.

Physics-based smooth cursor component for React with spring stiffness, damping and rotation-on-velocity options.

Curated index of CSS Houdini worklets, polyfills, specs, talks and experiments across the Paint, Layout and Typed OM APIs.

Kerning-aware text splitting for React that preserves letter-spacing when splitting into characters for staggered animation.

Twenty parameterised generators for CSS-only shapes, ribbons, tooltips, gradient shadows, section dividers and fancy borders.

Tailwind plugin rendering true superellipse squircles via the CSS Houdini Paint Worklet, with adjustable smoothing and rounded-corner fallback.

React marquee component using pure CSS animation with pause-on-hover, gradient edges, direction and speed props.

Marquee library where items can be added and removed while scrolling, supporting arbitrary DOM nodes and directions.

Self-positioning popovers built entirely on native CSS anchor positioning with no JavaScript positioning library.

Collection of buttons with unusual hover effects, each implemented as isolated copy-paste HTML and CSS.

Converts text into SVG stroke paths and animates the drawing, supporting custom fonts and per-letter timing.

Diff-aware animated number and text ticker for React, Vue and Svelte that only animates changed characters.

Library of tileable SVG background patterns with live foreground colour and opacity controls, copied out as data-URI CSS.

Pure-CSS glowing React orb with eight palettes, eight presets, live speed control and reduced-motion respect, no canvas or WebGL.

Real refraction liquid glass for the web using SDF lens maps, SVG displacement, and backdrop-filter — one file, no WebGL.

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.

Gallery of classic 3D demos — cloth simulation, Menger sponge, black hole, chaotic attractors — rendered entirely with retained HTML and CSS.

One React component that draws animated topographic contour backgrounds on the GPU, with six presets and a live playground.

WebGL library that stacks two images and lets the pointer, scroll or your own state paint a noise-carved hole through the top one.

Bottom navigation bar whose top edge behaves like a liquid surface: one parametric SVG trough that leans and shallows with travel speed. Zero dependencies.

99 button hover effects in pure CSS with no JavaScript or dependencies; each snippet uses one colour token and respects prefers-reduced-motion.

Checkout demo where the credit card is the form: it embosses as you type, flips for CVC, flies to centre on submit.

Pure-CSS technique deriving a responsive grid's column count, row count and per-item coordinates using round(), sibling-count() and sibling-index().

WebGPU liquid-glass carousel demo with real-time refraction and chromatic dispersion, built on three.js TSL node materials.

Real-time spectral FFT ocean in a single HTML file: WebGL2 and three.js, JONSWAP/TMA spectrum, three cascades, foam, caustics, underwater view.

Gallery of unusual CSS gradients including patterned, striped and repeating conic effects, each with copyable source.

Showcases of popular CSS animations reimplemented without any animation library, each with annotated source.

Visual generator for glassmorphism panels that outputs backdrop-filter CSS with live blur, transparency, border and outline controls.

React tool for generating volumetric cloud textures from layered SVG turbulence filters.

Library of animated React and Tailwind components including glow buttons, spotlight cards, marquees and hero effects.

WebGL2 and WebGPU recreation of Apple's liquid glass with tunable refraction, dispersion, blur and shadow parameters in a live playground.

Browser-based datamoshing tool that produces pixel-bleed and I-frame removal video glitches without desktop software.

Zoom-on-hover for product images with a detached pane, inline mode and no dependencies.