{"items":[{"title":"Base64 Encoder / Decoder","description":"Encode or decode Base64 — text, JSON, JWTs, and files up to 5 MB. Standard and URL-safe variants with full UTF-8 support and live preview.","tags":"base64 encoder decoder jwt data-uri","category":"tool","href":"/tools/base64-encoder-decoder/"},{"title":"Colour Contrast Checker","description":"Check WCAG 2.1 contrast ratios between any two colours — instant AA / AAA pass-fail with a live preview.","tags":"accessibility wcag contrast color a11y","category":"tool","href":"/tools/color-contrast-checker/"},{"title":"Color Format Converter","description":"Convert between hex, rgb, hsl, oklch, oklab, hwb, and named colors. Bulk mode — paste a whole stylesheet and convert every color at once with one click.","tags":"color converter hex to rgb rgb to hex hex to hsl color to oklch oklch converter css color tools","category":"tool","href":"/tools/color-format-converter/"},{"title":"CSS Formatter & Beautifier","description":"Paste minified or messy CSS and instantly get a cleanly indented, readable version — configurable indent, optional alphabetical sorting, lowercase hex, and live preview.","tags":"css formatter css beautifier pretty print css format css online css indent css tools free","category":"tool","href":"/tools/css-formatter/"},{"title":"CSS-in-JS to CSS Converter","description":"Paste a styled-components or emotion block and get plain CSS — handles tagged templates and object syntax, resolves & nesting into real selectors, converts camelCase to kebab-case, and outputs Plain CSS, CSS Modules, or SCSS.","tags":"css-in-js styled-components emotion css converter framework css modules tool","category":"tool","href":"/tools/css-in-js-to-css-converter/"},{"title":"CSS Minifier","description":"Paste any CSS and instantly get a minified, production-ready version — strips comments, whitespace, and redundant tokens with live size savings.","tags":"minifier css performance build optimisation","category":"tool","href":"/tools/css-minifier/"},{"title":"CSS Specificity Calculator","description":"Paste any CSS selector and get its (a, b, c) specificity score — with a colour-coded breakdown of every ID, class, attribute, pseudo, and element.","tags":"css specificity selectors cascade debugging","category":"tool","href":"/tools/css-specificity-calculator/"},{"title":"CSS to Tailwind Converter","description":"Free CSS to Tailwind converter that turns any CSS block into clean Tailwind utility classes — instantly, in your browser, with no signup. Paste raw CSS, hover/focus pseudo-classes, or @media queries and get back Tailwind v3 or v4 utility classes with auto-applied variant prefixes (hover:, focus:, md:, lg:, dark:) and arbitrary-value fallbacks like px-[14px] for anything outside the default scale. Live preview included. Works offline. 100% client-side.","tags":"css to tailwind tailwind converter css to tailwindcss tailwind class generator tailwind v3 converter tailwind v4 converter tailwind v4 toggle tailwind arbitrary values tailwind hover variant tailwind focus variant css media query to tailwind tailwind responsive prefix tailwind dark mode converter tailwind class lookup tailwind live preview tailwind from css convert inline style to tailwind css property to tailwind tailwind utility classes no signup client-side converter offline tailwind tool free tailwind converter","category":"tool","href":"/tools/css-to-tailwind-converter/"},{"title":"CSS Unit Converter","description":"Convert between every CSS unit — px, rem, em, pt, vw, vh, %, cm, in, deg, rad, ms, dpi — with live context controls and copy-on-click.","tags":"css units converter rem vw","category":"tool","href":"/tools/css-unit-converter/"},{"title":"CSS Variable Checker","description":"Paste any :root block and instantly see every --variable as a swatch, chip, or chain — with live filter, type detection, and var() resolution.","tags":"css variable checker css variables css custom properties design tokens theme audit css variables tool","category":"tool","href":"/tools/css-variable-checker/"},{"title":"HTML Entity Encoder / Decoder","description":"Encode or decode HTML entities — escape <, >, &, quotes, and special characters with named, decimal, or hex output.","tags":"html entity encoder decoder escape","category":"tool","href":"/tools/html-entity-encoder/"},{"title":"HTML to JSX Converter","description":"Paste HTML, get React JSX — converts class to className, for to htmlFor, void elements to self-closing, event handlers to camelCase, and inline styles to object syntax. Handles 50+ attribute conversions and edge cases.","tags":"html jsx react converter framework tool","category":"tool","href":"/tools/html-to-jsx-converter/"},{"title":"JSON to TypeScript Converter","description":"Paste any JSON and get TypeScript interfaces, Zod schemas, JSON Schema, and Go structs — all four formats from one input, with full inference options.","tags":"json typescript zod json schema go converter tool","category":"tool","href":"/tools/json-to-typescript-converter/"},{"title":"JSON / YAML / CSV Converter","description":"Convert between JSON, YAML, and CSV in one tool. All 9 conversions, with options for indent, sort keys, YAML quote style, CSV delimiter, nested-object flattening and more.","tags":"json to yaml yaml to json json to csv csv to json json yaml csv converter json converter format converter","category":"tool","href":"/tools/json-yaml-csv-converter/"},{"title":"PX to REM Converter","description":"Convert pixel values to REM units instantly — set your base font size and get exact REM equivalents.","tags":"converter px rem units responsive","category":"tool","href":"/tools/px-to-rem-converter/"},{"title":"Responsive Breakpoint Tester","description":"Preview any URL across iPhone, iPad, laptop, and desktop sizes — with Tailwind breakpoint detection, rotation, and live zoom.","tags":"responsive breakpoint viewport device testing","category":"tool","href":"/tools/responsive-breakpoint-tester/"},{"title":"SVG to JSX Converter","description":"Paste any SVG and get a clean React component — auto-renames attributes, swaps hardcoded colors for currentColor or props, wraps in forwardRef with TypeScript and a size prop, and previews the result on light and dark backgrounds.","tags":"svg jsx react icon converter framework tool","category":"tool","href":"/tools/svg-to-jsx-converter/"},{"title":"Tailwind Config Theme Builder","description":"Pick a primary color, get a complete Tailwind theme — 11-shade color scale, semantic tokens, dark mode variants, and four output formats: Tailwind v3, v4 @theme, plain CSS variables, and shadcn/ui tokens.","tags":"tailwind theme generator shadcn oklch framework tool","category":"tool","href":"/tools/tailwind-config-theme-builder/"},{"title":"Tailwind to CSS Converter","description":"Paste any Tailwind CSS class string and instantly get equivalent plain CSS — supports variants (hover, focus, md), arbitrary values, and four output formats: plain CSS, custom properties, SCSS, and @apply.","tags":"tailwind css converter tailwind to css utility classes tool","category":"tool","href":"/tools/tailwind-to-css-converter/"},{"title":"Viewport Unit Calculator","description":"Convert pixels to vw, vh, vmin, vmax — and back — at any viewport size, with device presets and a fluid-typography reference table.","tags":"viewport vw vh fluid responsive","category":"tool","href":"/tools/viewport-unit-calculator/"},{"title":"XML to JSON Converter","description":"Convert XML to JSON in your browser — configurable attribute prefix, namespace handling, force-array tag list, type coercion, CDATA preservation, and a JSON to XML reverse direction. Works on SOAP responses, RSS feeds, sitemaps, and Maven POMs. 100% client-side, no upload.","tags":"xml to json json to xml xml json converter xml to json with attributes xml namespace to json xml to json array force array xml to json xml cdata to json xml to json preserve order xml to json keep numbers as strings soap response to json rss to json atom feed to json xml to json without @ prefix lossless xml to json round trip convert xml to json online data converter tool","category":"tool","href":"/tools/xml-to-json-converter/"},{"title":"CSS Animation Generator","description":"Build CSS @keyframes animations visually — 20+ presets across fade / slide / zoom / bounce / spin / flip / rubber-band / swing, with full timing controls (duration, delay, iteration, easing, direction, fill-mode), animation-composition, prefers-reduced-motion guard, live replay, and export to CSS, SCSS, Tailwind, React, or Vue.","tags":"css animation generator animation generator keyframes generator css keyframes generator @keyframes generator css animation maker online animation generator free css animation generator css animation creator animation builder animation code generator css animation code generator css animation design tool css fade in animation css fade in generator css fade in keyframes fade in css css fade in fade out css slide in animation css slide up css slide down css slide left css slide right css slide animation css zoom animation css zoom in css zoom out css scale animation css scale up css scale down css bounce animation css bounce keyframes css pulse animation css shake animation css wobble css rubber band css swing animation css flip animation css spin animation css rotate animation css 360 rotate css infinite rotate css loading spinner animation tailwind animation tailwind keyframes tailwind animate-[ tailwind v4 animation tailwind v3 animation tailwind motion-safe tailwind animation utilities react animation react inline animation vue animation vue scoped animation scss animation mixin scss keyframes css animation duration css animation delay css animation iteration css animation easing css animation timing function cubic-bezier easing css animation steps css animation direction css animation alternate css animation reverse css animation fill-mode css animation forwards css animation play-state prefers-reduced-motion css accessible animation wcag animation vestibular safe animation animation reduce motion animation-composition css animation-composition replace css animation-composition add css animation-composition accumulate css hover animation css click animation css scroll animation css entrance animation css exit animation css attention animation css 2026 animation modern css animation css animation copy paste css animation snippet css animation examples","category":"generator","href":"/generators/css-animation-generator/"},{"title":"CSS Aspect Ratio Calculator","description":"Calculate any CSS aspect ratio and visualize it across six device viewports — iPhone, iPad, laptop, desktop, ultrawide, square. 10 presets (16:9, 4:3, 21:9, 1:1, 9:16, 3:2, golden, A4), computed values panel (decimal / inverse / padding-bottom %), legacy padding-bottom fallback, and export to CSS, SCSS, Tailwind, styled-components, or React.","tags":"css aspect ratio calculator aspect ratio calculator css aspect-ratio aspect ratio generator online aspect ratio calculator free aspect ratio calculator 16:9 calculator 4:3 calculator 21:9 ultrawide 1:1 square ratio 9:16 vertical 3:2 photography golden ratio css a4 paper css padding-bottom hack padding-bottom percentage aspect ratio fallback css aspect-ratio polyfill responsive video css youtube embed ratio video container css aspect-ratio iframe aspect-ratio video instagram aspect ratio tiktok aspect ratio stories aspect ratio reels aspect ratio tailwind aspect tailwind aspect-video tailwind aspect-square tailwind aspect-[ react aspect ratio vue aspect ratio scss aspect ratio mixin styled-components aspect ratio simplifier gcd ratio decimal aspect ratio inverse ratio device viewport sizes iphone viewport ipad viewport ultrawide monitor","category":"generator","href":"/generators/css-aspect-ratio-calculator/"},{"title":"CSS Background Pattern Generator","description":"Build CSS-only repeating background patterns visually — dots, stripes, grids, checkerboards, cross-hatch, triangles, zigzag, hexagons, topographic, plus, diamonds — with full color / size / density / rotation / opacity control and themeable CSS variable output.","tags":"css background pattern generator background pattern generator css pattern generator online css pattern generator free background pattern generator pattern maker css pattern builder geometric pattern generator css dots pattern polka dot css css dot grid css stripes pattern diagonal stripes css vertical stripes css horizontal stripes css css barber pole css grid pattern graph paper css css grid background blueprint css css checkerboard checkerboard css tile pattern css css cross-hatch crosshatch pattern css hatching css triangles pattern triangle background css css zigzag pattern zigzag background css hexagons pattern hexagon background honeycomb css css topographic pattern topo lines css contour css css plus pattern plus sign pattern css css diamonds pattern diamond background css no svg pattern pure css pattern css only background css repeating background css custom property pattern themeable css pattern css variable pattern tailwind background pattern tailwind arbitrary bg-image css pattern examples pattern copy paste pattern snippet","category":"generator","href":"/generators/css-background-pattern-generator/"},{"title":"CSS Border Radius Generator","description":"Design CSS border-radius shapes visually — per-corner H/V control for elliptical corners (slash syntax), 12 curated presets (sharp / slight / rounded / pill / circle / 3 blobs / leaf / diamond / ticket / chat), px / % units, 4 preview surfaces, and one-click copy to CSS, SCSS, Tailwind, React, or Vue.","tags":"css border-radius generator border radius generator border-radius maker online border-radius generator free border-radius generator border radius builder rounded corners generator css blob generator blob shape css organic shape css css squircle ios squircle css css pill shape pill button css css rounded button css circle circular div css border-radius 50% css elliptical corners border-radius slash syntax border-radius h v individual corner radius border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius asymmetric border-radius css leaf shape css diamond shape css ticket shape css chat bubble css speech bubble border-radius tailwind border-radius tailwind rounded-[ tailwind arbitrary rounded react border-radius vue border-radius scss border-radius mixin border-radius px vs percent border-radius animation animate border-radius css shape generator css custom shape modern css shapes border-radius examples border-radius copy paste border-radius snippet","category":"generator","href":"/generators/css-border-radius-generator/"},{"title":"CSS Box Shadow Generator","description":"Build layered CSS box shadows visually — stack up to 20 shadows in one declaration with per-layer x/y/blur/spread/color/opacity/inset controls, optional hover variant + transition, background-aware preview, and export to CSS, SCSS, Tailwind, React, or Vue.","tags":"css box shadow generator box shadow generator css box-shadow maker css shadow generator shadow generator css online box shadow generator free box shadow generator free css box shadow generator box shadow generator no signup css shadow code generator shadow code generator css drop shadow generator multi layer shadow generator layered shadow generator shadow stack generator css shadow stack css multiple shadows css multi-layer box-shadow css stacked shadows material design shadow generator material elevation generator material 3 elevation mui elevation mui shadow material 1dp shadow material 2dp shadow material 4dp shadow material 8dp shadow material 16dp shadow material 24dp shadow apple shadow css apple style box shadow ios shadow css macos shadow css stripe shadow css linear shadow css vercel shadow css tailwind shadow css github shadow css long shadow generator css long shadow long shadow css 30 layer shadow projected shadow css 45 degree shadow neumorphic shadow generator neumorphism shadow soft ui shadow dual shadow css inset outset shadow claymorphism shadow smooth shadow generator smooth-shadow css tobias ahlin shadow realistic css shadow natural shadow css css inset shadow inset box shadow inset shadow generator inner shadow css css glow effect generator css neon glow css glow shadow css text glow css button glow tailwind box shadow tailwind arbitrary shadow tailwind shadow-[ tailwind v3 shadow tailwind v4 shadow react box shadow react inline shadow vue box shadow vue shadow scss shadow mixin scss shadow variables styled-components shadow css card shadow css button shadow css modal shadow css dropdown shadow css hero shadow css float shadow css elevation box shadow hover effect box shadow transition css shadow hover interactive shadow css shadow on hover css lift on hover css css shadow examples css shadow recipes css shadow copy paste css shadow snippet box-shadow code copy paste css shadow 2026 modern box shadow box shadow trends 2026","category":"generator","href":"/generators/css-box-shadow-generator/"},{"title":"CSS Button Generator","description":"Design a complete CSS button — all 6 interactive states (default, hover, active, focus, disabled, loading) in one editor — with live preview on your real page background, WCAG contrast checking, and export to plain CSS, SCSS, Tailwind, React, or Vue.","tags":"css button generator button generator css button maker button maker online css button creator css button builder button design tool css button design generator online button generator free button generator free css button generator css button generator no signup css button generator free download free button maker button generator with preview button generator with code button code generator css button code generator css button maker free css button styles css button design css button examples css button code css button snippet button copy paste css css button copy paste css button code copy css buttons free css button library free css hover button generator css button hover effects generator css button hover css css button hover animation generator button hover effect generator css button focus ring generator css button focus outline css button focus state css button active state css button disabled state generator css button loading state css button states generator css button all states css button with hover css button with focus css button accessibility tailwind button generator tailwindcss button generator tailwind button styles tailwind button class generator tailwind utility button tailwind v3 button tailwind v4 button tailwind ui button alternative react button generator react button styles react inline-style button react button component generator vue button styles vue button generator scss button mixin generator scss button variables styled-components button emotion button styles css gradient button generator gradient button maker css 3d button generator css neon button generator css glow button generator css ghost button generator css outlined button generator css rounded button generator css pill button generator css square button generator css icon button generator css submit button generator css cta button generator primary button generator secondary button generator cta button design css button cta wcag contrast button accessible button generator accessible css button wcag aa button wcag aaa button css button accessibility screen reader button aria button focus visible button generator prefers-reduced-motion button material design button generator material 3 button generator mui button alternative chakra ui button alternative ant design button alternative shadcn button alternative headlessui button alternative bootstrap button alternative css framework button css button hover effect button generator 2026 modern css button css button no javascript pure css button css only button","category":"generator","href":"/generators/css-button-generator/"},{"title":"CSS Clip-Path Generator","description":"Design any CSS clip-path visually — drag polygon vertices, switch between polygon / circle / ellipse / inset modes, 21 presets (triangle, trapezoid, parallelogram, rhombus, pentagon, hexagon, octagon, star5, star6, arrows, chevrons, message, cross, rabbet, notched), and one-click copy.","tags":"css clip-path generator clip path generator clip-path maker online clip-path generator free css clip-path generator clip path builder clip path designer clip-path code generator css polygon polygon() css css polygon shapes polygon clip path css circle clip circle() css css circle shape circular clip path css ellipse clip ellipse() css elliptical clip css inset clip inset() css inset clip path rounded inset css triangle css triangle generator triangle clip path css triangle up down left right css hexagon hexagon clip path css honeycomb css pentagon css octagon css star shape star clip path 5 point star css 6 point star css css arrow shape arrow clip path css chevron chevron clip path css trapezoid css parallelogram css rhombus diamond clip path css message bubble speech bubble clip path tooltip arrow css css cross css plus shape css notched shape css cut corner tailwind clip path tailwind arbitrary clip-path tailwind v3 clip tailwind v4 clip react clip path react inline clip-path vue clip path scss clip path css shape examples css clip-path copy paste clip-path snippet clip-path animation animate clip path css shape morph polygon morph animation clip-path browser support modern css shapes 2026","category":"generator","href":"/generators/css-clip-path-generator/"},{"title":"CSS Color Palette Generator","description":"Extract a 3-12 color palette from any image — 100% client-side k-means clustering, no upload, no server. Real WCAG contrast scores (vs white + vs black) on every swatch, click any swatch to copy hex, and export to CSS custom properties, Tailwind config, design tokens (W3C format), SCSS variables, or JS array.","tags":"color palette generator css color palette generator color palette from image image to palette palette extractor image color extractor dominant color extractor k-means colors k-means palette color clustering client-side palette css custom properties palette css variables palette design tokens palette w3c design tokens tailwind colors config tailwind palette extend tailwind brand colors scss color variables sass color palette wcag contrast palette accessible palette contrast score palette color contrast checker palette brand color extraction logo color extraction ui color palette free color palette generator online palette generator palette maker color theme generator harmonious palette color scheme generator no upload palette privacy palette extractor browser-only color extraction","category":"generator","href":"/generators/css-color-palette-generator/"},{"title":"CSS Cubic Bezier Generator","description":"Design CSS cubic-bezier easing curves visually — drag two handles on the SVG plot, see the curve play live as a moving ball, compare against linear / ease / ease-in / ease-in-out simultaneously, 8 curated presets including spring + bounce-out, and export to CSS, SCSS, Tailwind config, or JS animation library.","tags":"cubic-bezier generator css cubic-bezier generator css easing generator css easing curve generator easing function generator animation curve generator transition curve generator cubic-bezier editor visual cubic-bezier drag cubic-bezier bezier curve editor css ease css ease-in css ease-out css ease-in-out css linear easing spring easing css css spring animation bounce easing css overshoot easing snap easing elastic easing transition-timing-function animation-timing-function css timing function framer motion easing framer motion cubic-bezier gsap easing anime.js easing react spring easing js easing array tailwind transition-timing-function tailwind ease config tailwind custom ease scss easing variable css easing variable --ease-custom easing examples easing copy paste css easing snippet natural motion css ui animation easing best easing css easing for buttons easing for modals","category":"generator","href":"/generators/css-cubic-bezier-generator/"},{"title":"CSS Cursor Generator","description":"Browse all 36 standard CSS cursor keywords (organized into 6 groups — general, links, selection, drag, resize, zoom) with live-hover preview on each tile. Build custom data-URL cursors from emoji, 2-char text badges, or raw SVG with a visual hotspot picker. Multi-format export to CSS, SCSS, Tailwind, styled-components.","tags":"css cursor generator cursor generator custom cursor generator css cursor maker online cursor generator free cursor generator css cursor pointer css cursor grab css cursor zoom-in css cursor not-allowed css cursor crosshair css cursor text css cursor wait css cursor help css cursor move css cursor copy css cursor alias css cursor cell css cursor col-resize css cursor row-resize css cursor n-resize css cursor e-resize css cursor s-resize css cursor w-resize css cursor ne-resize css cursor nw-resize css cursor se-resize css cursor sw-resize css cursor ew-resize css cursor ns-resize css cursor nesw-resize css cursor nwse-resize css cursor all-scroll css cursor context-menu css cursor progress css cursor vertical-text custom cursor data url cursor data uri cursor hotspot cursor hotspot picker emoji cursor svg cursor text badge cursor tailwind cursor tailwind cursor-pointer tailwind arbitrary cursor-[ react cursor vue cursor scss cursor mixin styled-components cursor all 36 cursors css cursor list css cursor reference css cursor cheatsheet accessible cursor non-text contrast cursor wcag cursor","category":"generator","href":"/generators/css-cursor-generator/"},{"title":"CSS Filter Generator","description":"Build CSS filter chains visually — blur, brightness, contrast, saturate, grayscale, sepia, hue-rotate, invert, opacity, and drop-shadow — with live before/after preview, 13 curated presets (vintage, noir, cinematic, pop, dreamy, ghost), and one-click copy.","tags":"css filter generator filter generator css filter maker online filter generator free css filter generator image filter css css image effects filter chain generator css blur filter css blur image blur filter css backdrop blur css brightness css contrast css saturate css grayscale css invert css sepia css hue-rotate css opacity filter css drop-shadow filter drop-shadow drop-shadow vs box-shadow transparent png shadow css svg shadow css instagram filter css vintage filter css noir filter css cinematic filter css pop filter css dreamy filter css ghost filter css warm filter css cool filter css black white filter css css filter examples css filter copy paste filter snippet filter css code image filter on hover filter hover transition css filter animation before after filter preview compare original filtered css filter performance gpu accelerated filter filter compositor layer filter for accessibility high contrast filter css low vision filter","category":"generator","href":"/generators/css-filter-generator/"},{"title":"CSS Flexbox Generator","description":"Build CSS flexbox layouts visually — flex-direction (row / row-reverse / column / column-reverse), flex-wrap (nowrap / wrap / wrap-reverse), justify-content (6 options), align-items (5 options), align-content (6 options), gap, and 1-12 child items with live preview.","tags":"css flexbox generator flexbox generator css flex generator flexbox playground flexbox builder online flexbox generator free flexbox generator flexbox visualizer flex-direction flex-direction row flex-direction column flex-direction reverse flex-wrap flex-wrap nowrap flex-wrap wrap wrap-reverse justify-content justify-content center justify-content space-between justify-content space-around justify-content space-evenly justify-content flex-start justify-content flex-end align-items align-items center align-items stretch align-items baseline align-items flex-start align-items flex-end align-content align-content space-between align-content stretch css gap flexbox gap flex gap row-gap column-gap flex container flex item flex shorthand flex-grow flex-shrink flex-basis css holy grail layout css sticky footer flex flexbox header layout flexbox card layout flexbox sidebar tailwind flex tailwind justify tailwind items tailwind gap react flexbox vue flexbox scss flexbox flexbox cheatsheet flexbox examples flexbox copy paste","category":"generator","href":"/generators/css-flexbox-generator/"},{"title":"Font Pairing Finder — Curated Heading + Body","description":"Find a working web font pairing in seconds — 8 curated headings (Inter, Playfair Display, Space Grotesk, Fraunces, Archivo, Manrope, Syne, DM Serif Display) each paired with 3-4 hand-picked body fonts. Multi-size live preview across hero / subhead / card title / body / caption, automatic Google Fonts loading, copy-ready CSS / Tailwind / SCSS export.","tags":"font pairing finder font pairing generator font combination finder font pairing tool font pair generator font pairing google fonts google fonts pairing google font combination google fonts heading body font duo finder inter pairing playfair display pairing space grotesk pairing fraunces pairing manrope pairing syne pairing archivo pairing dm serif pairing serif sans-serif pairing editorial font pairing tech font pairing modern font pairing heading body font h1 body pairing headline body font match web typography type pairing typography duo font system tailwind font pairing tailwind font family tailwindcss google font css font pairing css web font css @import font free font pairing font pairing examples font pairing copy paste","category":"generator","href":"/generators/css-font-pairing-finder/"},{"title":"CSS Glassmorphism Generator","description":"Build frosted-glass surfaces visually — tune blur, tint, saturation, brightness, and border with live preview on 9 vivid surfaces, WCAG contrast scoring, multi-layer refraction, prefers-reduced-transparency fallback, and export to CSS, SCSS, Tailwind, CSS Modules, styled-components, React, or Vue.","tags":"css glassmorphism generator glassmorphism generator frosted glass generator glass effect generator css glass generator glassmorphism maker online glassmorphism generator free glassmorphism generator glassmorphism builder css glassmorphism creator frosted glass css generator glassmorphism code generator glassmorphism design tool glass background generator css backdrop-filter backdrop-filter generator backdrop-filter blur backdrop-filter saturate backdrop-filter brightness css backdrop-blur css backdrop blur generator webkit-backdrop-filter css frosted glass frosted glass css frosted card css frosted modal css frosted background css glass card css glass modal css glass panel css glass navbar css glass sidebar css ios glassmorphism ios 16 glass effect ios 17 glass ios 26 liquid glass apple liquid glass css macos vibrancy css macos glass css ventura glass effect sonoma glass effect tahoe liquid glass tailwind glassmorphism tailwind backdrop-blur tailwind glass class tailwind frosted glass tailwind v3 backdrop-saturate tailwind v4 backdrop tailwindcss glass effect react glassmorphism react glass card vue glassmorphism vue glass card scss glass mixin scss glassmorphism styled-components glass css modules glass emotion glass glassmorphism navbar glassmorphism header glassmorphism modal glassmorphism login glassmorphism signup glassmorphism hero glassmorphism dashboard glassmorphism dropdown glassmorphism toolbar glassmorphism tooltip wcag contrast glass accessible glassmorphism accessible frosted glass wcag aa glass wcag aaa glass prefers-reduced-transparency reduced transparency css macos reduce transparency saturate backdrop css color saturation backdrop vibrancy css macos vibrancy effect frosted vibrancy glass with hover glass hover transition interactive glass card glass button css glass cta css glassmorphism examples glassmorphism css examples glassmorphism code copy paste glassmorphism copy paste free glass css css glass 2026 modern glassmorphism neo glassmorphism post-glassmorphism glass design 2026 css blur background css blurred backdrop blurry background css css glass blur generator","category":"generator","href":"/generators/css-glassmorphism-generator/"},{"title":"CSS Gradient Generator","description":"Design linear, radial, conic, repeating, and mesh CSS gradients with live preview, drag-to-reorder color stops, per-stop alpha, optional animation, background-aware compositing, and export to CSS, SCSS, Tailwind, React, or Vue.","tags":"css gradient generator gradient generator css gradient maker online gradient generator css gradient creator gradient builder free gradient generator free css gradient generator css gradient generator no signup css gradient generator free gradient generator with preview gradient generator with code css gradient code generator gradient code generator css gradient design tool gradient design generator background gradient generator gradient picker css linear gradient generator linear gradient generator linear-gradient css css linear gradient code linear gradient maker linear gradient css example css radial gradient generator radial gradient generator radial-gradient css radial gradient maker css radial gradient examples radial gradient picker css conic gradient generator conic gradient generator conic-gradient css conic gradient maker css conic gradient examples css pie chart gradient css repeating gradient generator repeating-linear-gradient repeating-radial-gradient css stripes generator css stripe pattern css barber pole css bullseye gradient css mesh gradient generator mesh gradient generator mesh gradient css blurred mesh gradient css blob gradient modern mesh gradient css animated gradient generator animated gradient css moving gradient background css gradient animation background-position animation css infinite gradient css gradient keyframes css gradient with alpha rgba gradient generator transparent gradient generator css gradient transparency 8-digit hex gradient rrggbbaa gradient tailwind gradient generator tailwindcss gradient generator tailwind bg gradient tailwind arbitrary gradient tailwind v4 gradient tailwindcss linear gradient tailwindcss radial gradient react gradient generator react inline gradient vue gradient generator scss gradient mixin generator scss gradient variables styled-components gradient emotion gradient css background gradient css hero gradient css cta background css card gradient css button gradient css overlay gradient css glow gradient css glassmorphism gradient css neon gradient css sunset gradient css ocean gradient css purple gradient css blue gradient css pink gradient css orange gradient css instagram gradient css spotify gradient css stripe gradient css gradient with multiple colors css 3 color gradient css 4 color gradient css multi-stop gradient css smooth gradient css gradient interpolation css gradient color stops css gradient angle css gradient direction css gradient deg css 45deg gradient css diagonal gradient css vertical gradient css horizontal gradient oklch gradient p3 gradient wide gamut gradient modern css gradient css gradient 2026 css gradient new syntax css gradient share link shareable gradient url permalink gradient generator gradient with url hash","category":"generator","href":"/generators/css-gradient-generator/"},{"title":"CSS Grid Generator","description":"Build CSS Grid layouts visually — column / row counts (1-8 each), per-axis units (fr / px / % / auto), independent column-gap and row-gap, all alignment properties (justify-items, align-items, justify-content, align-content), live preview, and exports to CSS, SCSS, Tailwind, React, or Vue.","tags":"css grid generator grid generator css grid maker online css grid generator free css grid generator css grid builder css grid playground grid-template-columns grid-template-rows grid-template-areas css grid layout fr unit css css fr fractional unit repeat() css minmax css minmax(0, 1fr) auto-fit auto-fill css grid gap row-gap css column-gap css grid-gap css justify-items grid align-items grid justify-content grid align-content grid place-items place-content grid-column grid-row grid-area grid-column-start grid-column-end css holy grail layout grid css 12-column grid css dashboard layout css responsive grid tailwind grid tailwind grid-cols tailwind grid-rows tailwind gap react grid vue grid scss grid css grid vs flexbox css grid cheatsheet css grid examples","category":"generator","href":"/generators/css-grid-generator/"},{"title":"CSS Letter Spacing & Line Height Generator","description":"Tune CSS letter-spacing and line-height visually across 8 elements (h1, h2, h3, body, small, caption, uppercase label, mono) × 8 font stacks (system, geometric, humanist, slab, modern serif, mono, display). Goldilocks side-by-side line-height comparison so your eye picks the right value, not your guesswork. Multi-format export.","tags":"css letter spacing generator letter spacing generator css letter-spacing css tracking css line-height generator line-height generator css line-height best line-height css css typography generator type system generator type scale generator css typography tool typography playground web typography tester uppercase tracking letter spacing uppercase label tracking css body text line-height h1 line-height h2 line-height h3 line-height headline letter-spacing tight headline tracking negative letter-spacing tailwind tracking tailwind leading tailwind tracking-tight tailwind leading-relaxed react typography scss typography mixin styled-components typography system font stack web-safe font stack geometric sans humanist sans old-style serif modern serif slab serif","category":"generator","href":"/generators/css-letter-spacing-generator/"},{"title":"CSS Loader Generator","description":"Design a complete CSS loader — pick from 8 families (spinner, dots, bars, pulse, skeleton, progress, dual-ring, cube), preview on your real page background, transition through Loading / Success / Error / Idle states, check WCAG contrast, and export to plain CSS, Tailwind, SCSS, React + TS, Vue, Svelte, or Astro.","tags":"css loader generator loader generator css css spinner generator spinner generator css loading spinner generator css loading animation generator css preloader generator online loader generator free loader generator free css loader generator css loader maker loading animation maker loader generator with preview loader generator with code css loader code generator css loader copy paste css skeleton loader generator skeleton loader generator skeleton screen generator skeleton placeholder css facebook skeleton loader linkedin skeleton loader youtube skeleton loader twitter skeleton loader x skeleton loader css progress bar generator progress bar generator css progress bar maker indeterminate progress css determinate progress css striped progress bar gradient progress bar css dots loader three dots loader bouncing dots loader typing dots loader css typing indicator discord typing dots slack typing dots imessage typing css bars loader audio equalizer bars loading bars css music bars loader css pulse loader pulsing loader css heartbeat loader pulse ring loader css dual ring loader double ring spinner counter rotating ring css cube loader 3d cube loader rotating cube spinner loading.io alternative loading io free css loaders alternative css-loaders.com alternative cssload alternative spinkit alternative three dots loader npm alternative react loader spinner alternative react spinners alternative react loading alternative ng spinkit vue loading spinner svelte spinner tailwind loader tailwindcss spinner tailwind loading animation tailwind v3 spinner tailwind v4 spinner tailwind ui spinner alternative react spinner generator react loading component react inline-style loader vue loading spinner vue loader component svelte loader astro loader component scss loader mixin scss spinner variables styled-components loader emotion loader styles stripe loading spinner vercel loading dots linear loading pulse github octocat spinner ios activity indicator css material circular progress shadcn loader shadcn spinner shadcn skeleton magic ui loader aceternity ui loader mui circularprogress alternative chakra spinner alternative ant design spin alternative mantine loader alternative wcag loader accessible loader aria-live loader role status loader screen reader loader blind user loader wcag 2.2 loader wcag 1.4.11 loader contrast wcag 2.3.3 loader animation eu eaa loader section 508 loader uk equality act loader canada aca loader accessibility loader pattern prefers-reduced-motion loader motion sensitivity loader vestibular safe loader reduce motion spinner css loader cls loader cumulative layout shift core web vitals loader lighthouse loader loader inp loader lcp @property typed angle loader conic-gradient loader animated conic loader rotating conic gradient loading state pattern skeleton screen pattern perceived performance loader perceived performance skeleton css only loader pure css loader no javascript loader no js spinner javascript free loader modern css loader 2026 best css loader generator css loader 2026 modern loader design infinite loop spinner looping loader css smooth spinner css gpu accelerated loader linear() easing loader smooth animation loader 120hz loader animation vrr loader smooth css loader animation duration loader timing loader easing loader direction reverse mit licensed free for commercial use open source loader generator","category":"generator","href":"/generators/css-loader-generator/"},{"title":"CSS Outline & Border Generator","description":"Build CSS borders, outlines, and gradient borders visually — three modes in one tool with per-side border controls, side-by-side border-vs-outline comparison, gradient-border recipe via mask, and one-click export to CSS, SCSS, Tailwind, styled-components, React, or Vue.","tags":"css border generator border generator css outline generator outline generator css border maker online border generator free css border generator border builder css per-side border border-top css border-right css border-bottom css border-left css asymmetric border css border styles solid border dashed border dotted border double border groove border ridge border inset border outset border css gradient border gradient border css rainbow border css linear gradient border css border-image mask border css outline vs border outline vs border outline-offset css focus outline css focus ring css wcag focus indicator css border radius rounded border css border color border alpha tailwind border tailwind outline tailwind gradient border tailwindcss border utilities tailwind border-[ react border vue border scss border mixin styled-components border css dropzone border css dashed dropzone drag drop border css css underline only bottom-border only css inline label border accessibility focus indicator wcag 2.2 focus non-text contrast","category":"generator","href":"/generators/css-outline-border-generator/"},{"title":"CSS Scrollbar Generator","description":"Generate custom CSS scrollbars visually — width, thumb color, track color, hover state, padding, border-radius. Outputs both modern scrollbar-color and legacy ::-webkit-scrollbar CSS side by side, with a live scrollable preview, 6 curated presets, and one-click copy.","tags":"css scrollbar generator custom scrollbar css scrollbar generator online scrollbar generator free css scrollbar generator scrollbar maker scrollbar designer scrollbar styling tool ::-webkit-scrollbar webkit scrollbar generator webkit scrollbar css webkit scrollbar thumb webkit scrollbar track webkit scrollbar hover scrollbar-color scrollbar-width css scrollbar-color css scrollbar-width thin css scrollbar-width auto css scrollbar-width none firefox scrollbar css chrome scrollbar css safari scrollbar css edge scrollbar css cross-browser scrollbar hide scrollbar css css hide scrollbar invisible scrollbar no scrollbar css thin scrollbar css minimal scrollbar css macos scrollbar css github scrollbar css neon scrollbar css css thumb radius scrollbar pill shape rounded scrollbar scrollbar padding scrollbar gap css scrollbar hover scrollbar hover color scrollbar interactive css scrollbar examples scrollbar copy paste scrollbar code generator scrollbar snippet scrollbar accessibility wcag scrollbar accessible scrollbar","category":"generator","href":"/generators/css-scrollbar-generator/"},{"title":"CSS Spacing Scale Generator","description":"Build a modular CSS spacing scale visually — pick a base size and modular ratio (minor 2nd, major 3rd, perfect 4th, augmented 4th √2, perfect 5th, golden), see the cascade as size-proportional rectangles + a numeric token table, customize naming (T-shirt / numeric / step), prefix, and unit (rem / px / em), then export to CSS variables, Tailwind config, W3C design tokens, SCSS map, or a JS object.","tags":"css spacing scale spacing scale generator modular scale generator modular spacing design tokens spacing css variables spacing tailwind spacing tailwind spacing scale tailwind spacing config rem spacing scale px spacing scale em spacing scale golden ratio spacing perfect fourth ratio modular fifth minor second spacing major third ratio design system spacing type-spacing-scale link harmonious spacing tshirt spacing sizes xs sm md lg xl spacing numeric spacing scss spacing map scss spacing variables css spacing tokens w3c design tokens figma tokens spacing tokens studio spacing react spacing vue spacing styled-components spacing 8pt grid 4pt grid 4-point grid spacing 8-point grid spacing","category":"generator","href":"/generators/css-spacing-scale-generator/"},{"title":"CSS Text Shadow Generator","description":"Stack multi-layer CSS text-shadows visually — 13 curated presets (neon, retro, hard-long, emboss, outline, 3D, fire, pastel, letterpress) with full per-layer x/y/blur/color control, live preview, editable text/font/background, and one-click copy.","tags":"css text-shadow generator text shadow generator css text shadow maker online text-shadow generator free text-shadow generator text shadow builder text-shadow designer css neon text neon text effect css css glow text glowing text css css 3d text 3d text effect css css text depth extruded text css css text outline outline text css stroke text css faux outline css css emboss text embossed text css letterpress text indented text css css retro text retro text effect vintage text css 80s text css css long shadow text long shadow text effect stacked text shadow css fire text burning text css flame text effect css pastel text soft text shadow text-shadow multiple multiple text shadows stacked text-shadows css text-shadow blur css text-shadow color css text-shadow offset css typography effects text effects css fancy text css tailwind text shadow tailwind arbitrary text-shadow text-shadow copy paste text-shadow examples text-shadow snippet","category":"generator","href":"/generators/css-text-shadow-generator/"},{"title":"CSS Transform Generator","description":"Stack CSS transforms visually — translate (X / Y / Z), rotate (X / Y / Z), scale (X / Y with lock), skew (X / Y), perspective, and transform-origin (9-position picker). 14 curated presets, ghost-reference overlay, identity-aware output, and export to CSS, SCSS, Tailwind, React, or Vue.","tags":"css transform generator transform generator css transform maker online transform generator free css transform generator css translate css translatex css translatey css translatez css translate3d css rotate css rotatex css rotatey css rotatez css rotate3d css scale css scalex css scaley css scale3d css skew css skewx css skewy css perspective css 3d transform 3d css css transform 3d transform-origin transform origin picker css transform origin css card flip card 3d effect flip card css css carousel transform css 3d carousel css isometric isometric css css axonometric css hover lift lift on hover css card hover transform css tilt effect vanilla-tilt css parallax tilt tailwind transform tailwind translate tailwind rotate tailwind scale react transform vue transform scss transform mixin transform animation animate transform gpu accelerated transform transform copy paste transform examples transform snippet","category":"generator","href":"/generators/css-transform-generator/"},{"title":"CSS Wave Generator","description":"Design a complete CSS wave — pick from 6 families (sine, compound, bezier, stepped, organic turbulence, hand-drawn), stack 1-4 parallax layers, load from 18 real-world templates (SaaS hero, footer, divider, wellness, agency, 404), animate via @property typed-angle or scroll-timeline, check WCAG contrast on dark/light/mesh backgrounds, and export to 8 formats: SVG, CSS background-image, clip-path, mask-image, Tailwind, React, Vue, Svelte, Astro.","tags":"css wave generator wave generator css svg wave generator animated css wave generator css wave animation generator css wave divider generator css wave background generator clip-path wave generator css wave generator with animation multi-layer wave generator parallax wave generator css tailwind wave generator react wave generator free css wave generator online wave generator css wave maker wave svg maker wave generator copy paste wave generator with preview css wave divider copy paste svg wave code for hero section css only wave animation snippet wave separator html css animated wave footer code hero wave background svg copy section divider wave code footer wave svg snippet wave svg path copy react wave component tailwind wave clip-path class astro wave divider component vue svg wave component nextjs hero wave background svelte wave divider remix wave background shadcn wave component framer motion wave how to make a wave in css how to animate svg wave path css wave divider tutorial svg path wave bezier explained css clip-path wave example animate d attribute css keyframes svg wave math sine compound wave css tutorial parallax wave tutorial hero section wave background css footer wave divider css section transition wave svg wavy underline css generator landing page wave animation saas hero wave background wellness website wave divider agency website wave divider 404 page wave background dashboard sparkline wave audio equalizer wave css scrollytelling wave css shape() wave divider mask-image wave css scroll-timeline wave animation @property wave animation svg feturbulence wave filter css wave with backdrop-filter view-transition wave css wave glassmorphism css wave neumorphism haikei alternative getwaves alternative shapedivider alternative sssurf alternative svgwave alternative magicpattern wave alternative ui surgeon wave alternative wavegenerator.app alternative css-generators wave alternative angrytools wave alternative sine wave generator compound wave generator bezier wave generator stepped wave generator organic wave generator hand drawn wave generator turbulence wave generator noise wave svg wave amplitude css wave frequency css wave phase css wave wavelength css wave divider top wave divider bottom wave divider both sides wave with stroke outline wave fill gradient multi layer wave svg parallax svg layers layered wave svg export responsive wave divider mobile responsive wave generator wave 360px wave 768px wave 1440px wave divider tailwind v3 wave divider tailwind v4 tailwind arbitrary value wave tailwind v4 wave wave divider react 18 wave divider react 19 react server component wave wave divider next.js app router wave divider next 14 wave divider next 15 wave divider astro 4 wave divider astro slot wave divider sveltekit 2 wave divider svelte 5 runes wave divider vue 3 vue 3 composition api wave css wave wcag accessible wave svg aria-hidden wave wave focusable false wave decorative wave role img wave aria-label screen reader wave wcag 2.2 wave wcag 1.4.11 wave contrast eu eaa wave section 508 wave uk equality act wave canada aca wave accessibility wave pattern prefers-reduced-motion wave motion sensitivity wave vestibular safe wave reduce motion wave css wave cls wave cumulative layout shift core web vitals wave lighthouse wave wave inp wave lcp css wave performance svg byte size wave compressed svg wave optimized wave svg wave aspect ratio css wave preserveaspectratio modern css wave 2026 best css wave generator css wave 2026 modern wave design trendy wave divider 2026 wave with backdrop-filter wave with mix-blend-mode wave with filter blur wave with filter drop-shadow css conic gradient wave css linear gradient wave css radial gradient wave css only wave pure css wave no javascript wave no js wave javascript free wave css wave codepen css wave github css wave gist css wave demo shadcn ui wave magic ui wave aceternity ui wave mui wave alternative chakra wave mantine wave stripe hero wave vercel hero wave linear app wave notion hero wave github hero wave figma hero wave framer hero wave wellness website hero yoga website wave meditation app wave fitness landing page wave agency hero wave portfolio wave divider freelance landing wave ecommerce hero wave shopify hero wave product page wave saas signup page wave blog hero wave newsletter hero wave content site wave wave open in codepen fork wave generator share wave url wave permalink wave to mask converter wave clip image wave clip video wave with photo overlay wave over image wave gradient overlay free for commercial use mit licensed no signup wave generator no login wave no watermark wave generator open source wave generator wave generator with source code wave generator npm package css wave 2024 css wave 2025 css wave 2026","category":"generator","href":"/generators/css-wave-generator/"},{"title":"Neumorphism Generator","description":"Design soft-UI neumorphism visually — three depth modes (convex, flat, concave), six palettes including dark mode, multi-component preview (button, card, input, toggle), four interactive states, WCAG contrast checker, and one-click export to plain CSS, SCSS, Tailwind, styled-components, React, or Vue.","tags":"neumorphism generator neumorphic generator neumorphism css generator soft ui generator neumorphic button generator neumorphism design generator neumorphism design tool free neumorphism generator neumorphism generator online neumorphism generator free neumorphism generator no signup neumorphism builder neumorphism maker soft ui design generator neumorphic ui generator neumorphism code generator neumorphism css neumorphism box-shadow dual shadow generator inset box-shadow generator inset shadow css raised shadow css two shadow css neumorphic shadow soft ui shadow neumorphism box shadow generator css box-shadow neumorphism neumorphism button neumorphic button css neumorphism button hover neumorphic button hover state neumorphic button pressed state neumorphism toggle neumorphic toggle switch neumorphic input field neumorphic card design soft ui card convex neumorphism concave neumorphism flat neumorphism raised neumorphism sunken neumorphism inset neumorphism outset neumorphism neumorphism depth neumorphic surface neumorphism dark mode dark neumorphism generator neumorphism black theme neumorphism light mode neumorphism color palette neumorphism #e0e5ec neumorphism background color soft ui palette tailwind neumorphism tailwindcss neumorphism tailwind soft ui tailwind neumorphic tailwind v3 neumorphism tailwind v4 neumorphism tailwind shadow arbitrary react neumorphism react neumorphic button react soft ui vue neumorphism vue neumorphic component scss neumorphism mixin scss soft ui styled-components neumorphism emotion neumorphism neumorphism accessibility neumorphic accessibility neumorphism wcag neumorphism contrast neumorphism aa neumorphism aaa neumorphism not accessible neumorphism contrast problem accessible neumorphic design neumorphism alternative neumorphism vs glassmorphism neumorphism vs material design neumorphism vs claymorphism neumorphism vs skeuomorphism neumorphism vs flat design neumorphism trend 2026 is neumorphism still used neumorphism dead neumorphism 2026 modern soft ui neumorphism figma neumorphism figma plugin neumorphism sketch neumorphism adobe xd neumorphism code from figma figma to neumorphism css neumorphism tutorial neumorphism guide how to make neumorphism css neumorphic design system neumorphism design system design system neumorphism soft ui copy paste neumorphism copy paste css neumorphism code snippet neumorphism live preview neumorphism generator with preview neumorphic css online css neumorphism online editor oklch neumorphism display-p3 neumorphism modern css neumorphism neumorphism wide gamut neumorphism color-mix neumorphism light-dark free design tool mit licensed no signup design tool no watermark generator free css generator","category":"generator","href":"/generators/neumorphism-generator/"},{"title":"9 CSS 3D Designs","description":"9 hand-coded CSS 3D scenes built with real transforms, perspective, and preserve-3d — iridescent flip cards, a midnight coverflow carousel, kinetic tilt pricing cards, a page-turn flipbook, a Bauhaus drag-cube navigator, a modular synth control panel, a luxury hover-flip product showcase, a 5×5 spinning cube matrix, and a 60-orb DNA double helix. No WebGL, no libraries.","tags":"css 3d css 3d effects css 3d animations css 3d card flip css 3d cube css 3d transform transforms perspective preserve-3d translatez rotatey rotatex design styles design ui design","category":"collection","href":"/design-styles/css-3d/"},{"title":"26 CSS Accordions — Vertical & Horizontal","description":"26 free CSS accordions — 17 vertical and 9 horizontal layouts with copy-paste HTML and CSS.","tags":"accordion vertical accordion horizontal accordion details summary expand collapse navigation css-only interactive","category":"collection","href":"/navigation/css-accordions/"},{"title":"20 CSS Animated Buttons","description":"20 hand-coded CSS animated buttons — neon glow, ripple, 3D press, liquid fill, jelly bounce, shine sweep, animated border, moving gradient CTA, text flip, submit success state, add-to-cart progress, download icon, hamburger-to-close, toggle switch, loading spinner inside button, next/prev arrow nav, and ghost button background reveal. Half pure CSS, half lightweight JS for production interactions.","tags":"css animated buttons animated button css css button animation neon button css ripple button css submit success animation add to cart animation css css button hover animation","category":"collection","href":"/motion/css-animated-buttons/"},{"title":"15 CSS Background Animations","description":"15 hand-coded CSS background animations with live demos — infinite shifting gradient, floating particle bubbles, parallax starry night, clickable cyberpunk ripple, sliding geometric grid, SVG wave overlays, glassmorphism orbs, aurora borealis ribbons, matrix digital rain, mesh gradient blobs, falling snow, morphing blob, retro synthwave 3D grid, infinite scrolling diagonal marquee, comic-book halftone dots. 100% Pure CSS, no JavaScript, no canvas, no particles.js. prefers-reduced-motion respected, scoped class names, MIT-licensed.","tags":"css background animation animated gradient background css css floating particles css parallax starry night css matrix rain effect css mesh gradient animation css glassmorphism background css aurora background css snow effect css morphing blob animation synthwave 3d grid css css marquee background css halftone dot animation css ripple effect on click css scrolling grid background pure css background animation css background no javascript infinite background animation css css hero background animation css landing page background css svg wave animation particles js alternative css css bubble background background animation no canvas motion css-only","category":"collection","href":"/motion/css-background-animations/"},{"title":"30 CSS Badges","description":"30 hand-coded CSS badges spanning collectibles, status indicators, certifications, notifications, membership tiers, and live-data displays. Upload progress, typing indicator, scrabble tile, keycap shortcut, transit indicator, origami medal, hreflang, E-E-A-T, crawl status, schema, search intent, core web vitals, ECG, build pipeline, countdown, live price, file extension, dice, signal bars, reading time, aurora, vaporwave, risograph, wax seal, conference lanyard, botanical tier, cyberpunk glitch, art deco, brutalist status, holographic.","tags":"css badge badge design upload progress typing indicator scrabble tile keycap shortcut transit indicator origami medal hreflang e-e-a-t crawl status schema badge search intent core web vitals ecg heartbeat build pipeline countdown ring live price ticker file extension dice face signal bars reading time aurora status vaporwave chrome risograph wax seal conference lanyard botanical tier cyberpunk glitch art deco medallion brutalist status holographic collectible","category":"collection","href":"/snippets/css-badges/"},{"title":"14 CSS Banners & Alerts","description":"Hand-coded CSS banner and alert patterns covering every notification surface a real product needs — dismissible alerts, sticky announcements, semantic status alerts, cookie consent, form validation, toasts, live-update banners, and promotional hero banners. Pure CSS plus scoped JS — no framework, semantic HTML, accessibility-first, copy-paste ready.","tags":"banner alert notification toast snackbar cookie banner dismissible alert sticky banner announcement banner bootstrap alert form validation icon alignment pulsing banner live update border left alert diagonal banner hero banner gradient border material design text wrap ui snippet snippets accessibility aria-live css design","category":"collection","href":"/snippets/css-banners-alerts/"},{"title":"19 CSS Blockquote Designs","description":"19 hand-coded CSS blockquote designs — pull quotes, testimonials, speech bubbles, tweet style, newspaper drop-caps, code comments and more. Semantic HTML, copy-paste ready.","tags":"blockquote css blockquote pull quote testimonial quote design snippets css-only typography","category":"collection","href":"/snippets/css-blockquotes/"},{"title":"22 CSS Breadcrumbs","description":"22 original CSS breadcrumb designs — underline grow, pill, diagonal slash, neon trail, brutalist, frosted glass, vertical stacked, progress track, holographic shimmer and more.","tags":"breadcrumbs navigation css-only animation interactive","category":"collection","href":"/navigation/css-breadcrumbs/"},{"title":"8 CSS Brutalist Designs","description":"8 hand-coded CSS brutalist designs spanning raw e-commerce product cards, a bureaucratic inspection form, a dark constructivist ops dashboard, a collision-typography portfolio grid, an indie SaaS hero + pricing split, a draggable Windows 95 desktop, a three-column long-read editorial, and a stark streetwear catalog. Heavy borders, oversized type, no rounded corners.","tags":"brutalist brutalism raw design anti-design design styles design ui design css design","category":"collection","href":"/design-styles/css-brutalist/"},{"title":"22 CSS Button Group Designs","description":"22 dynamic CSS button groups with motion-driven interactions — plasma loops, holographic gradients, magnetic discs, wormhole tabs, particle aurora. Pure CSS or light JS, copy-paste ready.","tags":"button group css button group segmented control toolbar pagination split button components css-only","category":"collection","href":"/components/css-button-groups/"},{"title":"27 CSS Button Hover Effects","description":"27 hand-coded CSS button hover effects — 3D press, neon glow, gradient slide, border draw, liquid fill, ripple, glitch text, and kinetic flips. Every demo is pure CSS (no JavaScript, no framework), tuned for 60fps with transform and opacity, and respects prefers-reduced-motion out of the box.","tags":"css buttons button hover button hover effects css animation css button animation button hover css 3d button gradient button neon button glow button ripple button liquid fill button glitch button border animation slide hover button press effect pure css no javascript copy paste css hover css interactive ui 60fps animation css button hover on click prefers-reduced-motion","category":"collection","href":"/motion/css-button-hover-effects/"},{"title":"43 CSS Button Designs","description":"43 hand-coded CSS buttons — real-world materials like brushed brass and vinyl, interactive use-case buttons (add-to-cart, download, like, delete), and click-effect studies: magnetic mercury ripple, brutalist glitch, neon plasma burst, clay press, ink spread, and particle shards.","tags":"buttons hover animation css-only interactive add to cart download button like button glitch button neon button ripple effect","category":"collection","href":"/components/css-buttons/"},{"title":"27 CSS Calendar Designs","description":"27 hand-coded CSS calendar designs covering every search intent for 'css calendar' — pure-CSS calendar (no JavaScript), CSS Grid layouts, glassmorphism widgets, brutalist designs, dark mode UIs, neumorphic cards, horizontal timelines, sidebar widgets, booking date-range pickers, CSS Grid advent calendars, Fluent / Material Design, circular / radial layouts, retro neon cyberpunk, 3D flip cards, isometric dashboards, split-screen heroes, liquid micro-interactions, bento grid booking, vintage paper tear-offs, vertical timelines, kinetic typography, and slanted diagonal grids. 1 truly pure-CSS, 26 with small vanilla JS snippets for event handling. Scoped class names that never collide, prefers-reduced-motion respected, MIT-licensed.","tags":"css calendar css calendar design css calendar widget css calendar ui pure css calendar css calendar no javascript css grid calendar css grid calendar layout flexbox calendar responsive css calendar mobile calendar css glassmorphism calendar glassmorphism calendar widget neumorphic calendar neumorphic calendar widget dark mode calendar css dark calendar ui minimalist calendar widget brutalist calendar design neo brutalism calendar event planner css event planner schedule layout css schedule layout booking date picker css css date range picker advent calendar css css grid advent calendar fluent design calendar material design calendar circular calendar css radial calendar layout horizontal scroll calendar timeline calendar css vertical timeline calendar retro neon calendar cyberpunk calendar ui 3d flip card calendar isometric calendar dashboard split screen calendar liquid bubble hover bento grid calendar bento grid booking system vintage calendar css skeuomorphic calendar paper tear off calendar kinetic typography calendar slanted grid calendar components css-only","category":"collection","href":"/components/css-calendar-designs/"},{"title":"33 CSS Card Hover Effects","description":"33 hand-coded CSS card hover effects with live demos — multi-axis 3D tilt with parallax, glowing gradient glassmorphic border, image zoom with content slide-up, front-to-back 3D flip, sibling de-emphasis with :has(), minimalist elevation, plus 27 more (elastic lift, conic-gradient border, holographic foil, neon sign, glitch RGB split, magnetic float, blueprint reveal, aurora drift and more). 26 pure CSS + 7 with a small vanilla JS snippet for cursor tracking. prefers-reduced-motion respected, scoped class names, MIT-licensed.","tags":"css card hover effect css card hover animation card hover effect pure css 3d tilt parallax card css :has sibling de-emphasis 3d flip card front to back glassmorphism card hover image zoom card hover css card elevation shadow css holographic card css neon card hover css glitch card hover css css card cursor follow spotlight card css magnetic hover card css css conic gradient border animation css card shimmer animation css card lift on hover css card animation no javascript interactive card css css card microinteraction premium card hover effect css product card hover css portfolio card hover css pricing card focus ui card hover examples css cards","category":"collection","href":"/motion/css-card-hover-effects/"},{"title":"20 CSS Cards with Animations","description":"20 hand-crafted CSS card components — aurora glow, 3D tilt, glassmorphism, neon borders, flip card, pricing, terminal, music player, weather widget and more.","tags":"cards components animation css-only ui","category":"collection","href":"/components/css-cards/"},{"title":"CSS Center a Div","description":"The complete guide to centering a div in CSS in 2026 — covering all 5 production techniques with live interactive demos. <strong>Flexbox</strong> (the modern default, works for 95% of cases): <code>display: flex; align-items: center; justify-content: center</code> on the parent. <strong>CSS Grid</strong> (one-line shorthand): <code>display: grid; place-items: center</code>. <strong>Absolute positioning + transform</strong> (for overlays and modals): <code>position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)</code>. <strong>Margin auto</strong> (for block elements with a known width): <code>margin: 0 auto</code> (horizontal only) or <code>margin: auto</code> with <code>position: absolute</code> + <code>inset: 0</code> (both axes). <strong>All methods side-by-side comparison</strong> — see every technique render the same content with visible axis crosshairs so you can see exactly where each method lands the element. All 5 demos are 100% pure CSS, MIT-licensed, copy-paste ready, with detailed explanations of which method to use when. Works in every modern browser (Chrome, Safari, Firefox, Edge), no JavaScript required.","tags":"css center a div center a div center div css center div in css how to center a div how to center div in css how to center a div in css center div vertically center div horizontally center div vertically and horizontally center div in middle of page center div in middle of screen center div on page css horizontal center css vertical center css center vertically css center horizontally css center element css center text css center image css center button css center form css center content css centering techniques css center methods center anything css flexbox center flexbox center div flex center flex justify-content center flex align-items center css flex center display flex center place-items center grid place-items center css grid center grid center div display grid center absolute center absolute position center transform translate center translate -50% -50% css position absolute center margin auto center css margin auto margin 0 auto css block center css inline center css text-align center center div without flexbox center div without grid center div legacy browsers center div ie11 center div before flexbox center div vanilla css center div pure css center div no javascript center div tailwind tailwind center tailwind flex center tailwind place items center bootstrap center div bootstrap centering react center div vue center div svelte center div next.js center div centering in css 2026 modern css centering center modal css center overlay css center popup css center loader css center image in container center button in form center content full screen center 100vh full screen center css css center fix div not centering div not centered center not working css why is my div not centered css centering troubleshoot center div all methods compare css centering flexbox vs grid centering absolute vs flexbox center css center cheatsheet css center copy paste mit licensed centering layouts","category":"collection","href":"/layouts/css-center-div-designs/"},{"title":"23 CSS Checkboxes","description":"23 hand-crafted CSS checkboxes — toggles, glow, draw stroke, bouncy pop, glassmorphism, neumorphic, liquid fill, ripple, confetti and more. Mostly pure CSS, copy-paste ready.","tags":"checkboxes forms animation css-only interactive","category":"collection","href":"/components/css-checkboxes/"},{"title":"21 CSS Circular & Radial Menu Designs","description":"21 free CSS circular and radial menu designs — pie, dome, orbital and skeumorphic layouts with copy-paste HTML and CSS.","tags":"css circular menu radial menu dome menu speed dial wheel menu pie menu navigation css-only","category":"collection","href":"/navigation/css-circular-menus/"},{"title":"18 CSS Close Buttons","description":"18 hand-coded CSS close buttons — rotate, magnetic cross, liquid pop, glitch, ink ripple, hold-to-confirm, origami crease and more. Pure CSS, drop-in ready.","tags":"close buttons dismiss modal css-only interactive","category":"collection","href":"/components/css-close-buttons/"},{"title":"12 CSS Code Blocks","description":"Twelve hand-coded CSS code block patterns covering every developer surface: minimalist dark and light modes, a Mac terminal CSS code block with traffic-light chrome, a CSS code block with copy button, a CSS code block with line numbers driven by counter-increment, a mobile-responsive overflow / word-wrap pair, neon glow, a glassmorphism code block, inline <code> pill styling, neumorphic embedded, split-pane code plus live preview, and a pure-CSS expandable wrapper. Accessible, mobile-first, scoped per-demo classes, MIT-licensed.","tags":"css code block css code block with copy button css code block with line numbers mac terminal css code block glassmorphism code block css neon code block css expandable code block css neumorphic code block inline code css pill light mode code block dark mode code block code block ui design pure css code block copy to clipboard css syntax highlight css responsive code block documentation code snippet code container css code editor mockup css checkbox hack collapsible counter-increment line numbers no javascript code block mit license code block","category":"collection","href":"/snippets/css-code-blocks/"},{"title":"6 CSS Countdown Timers","description":"Six hand-coded CSS countdown timer patterns for the conversion surfaces real products need — ecommerce flash sales, site-wide sticky announcement bars, shopping cart expiration alerts, coming-soon launches, circular SVG progress rings, and retro flip-clock timers. Accessible aria-live markup, prefers-reduced-motion fallbacks, scoped per-demo classes, MIT-licensed.","tags":"css countdown timer flash sale timer sticky countdown bar cart expiration timer coming soon countdown flip clock css circular countdown svg conic gradient timer pure css countdown no javascript countdown accessible countdown aria-live countdown prefers-reduced-motion ecommerce countdown product launch countdown shopify countdown woocommerce countdown copy paste countdown mit license countdown responsive countdown timer retro flip clock stroke-dasharray timer saas activity timer","category":"collection","href":"/snippets/css-countdown-timers/"},{"title":"12 CSS Dark Mode UI Patterns","description":"12 free CSS dark-mode UI patterns — OLED true-black, single-accent surfaces, layered slate, and emissive glow effects with copy-paste HTML and CSS.","tags":"dark mode dark mode ui oled dark theme dark dashboard design-styles css-only","category":"collection","href":"/design-styles/css-dark-mode-ui/"},{"title":"18 CSS Divider Collections","description":"18 hand-coded CSS section-divider collections across eighteen design languages — editorial, brutalist, art deco, cyber, scientific, fantasy, retro, newspaper, playful, music, festive, corporate, sketch and more — 54 animated divider variants, each on its intended background.","tags":"css divider section divider horizontal rule hr styling separator editorial divider brutalist art deco cyber scientific divider fantasy retro newspaper divider playful divider music divider festive divider corporate divider sketch divider ornamental rule","category":"collection","href":"/snippets/css-dividers/"},{"title":"22 CSS Dropdown Menu Designs","description":"22 hand-coded CSS dropdown menu designs with live demos — slide-down fade, clip-path curtain reveal, 3D perspective flip, elastic bounce spring, glassmorphism float panel, stagger children reveal, mega-menu grid, underline nav fade, native details/summary, checkbox-hack mobile nav, nested multi-level flyout, icon sidebar flyout, split-screen mega-menu, segmented pill nav, color swatch picker, right-click context menu, keyboard-accessible roving tabindex, stagger blur entrance, command palette search, autocomplete suggestion, click-outside close, and multi-select chip. 15 pure CSS + 7 with a tiny vanilla JS snippet — no framework. WCAG 2.2 aria-expanded + aria-haspopup + focus management, prefers-reduced-motion honoured, MIT licensed.","tags":"css dropdown menu dropdown menu css css dropdown dropdown css css dropdown navigation dropdown nav menu css css dropdown menu examples css dropdown menu code css dropdown menu copy paste free css dropdown menu css dropdown 2026 modern dropdown css css dropdown menu tutorial css dropdown no javascript pure css dropdown dropdown menu without javascript css only dropdown no js dropdown menu css dropdown :hover css dropdown :focus-within css dropdown checkbox hack css dropdown details summary css slide down dropdown slide down menu animation css fade dropdown fade in dropdown menu css css dropdown reveal animation css clip-path dropdown clip-path curtain reveal clip-path menu animation css mask reveal dropdown css 3d dropdown 3d perspective dropdown rotatex dropdown css perspective flip menu elastic dropdown css spring bounce dropdown cubic-bezier dropdown spring easing menu glassmorphism dropdown frosted glass dropdown backdrop-filter dropdown menu translucent dropdown css stagger dropdown css staggered dropdown items stagger reveal animation mega menu css mega menu dropdown mega menu grid css multi-column mega menu mega menu pure css split-screen mega menu underline nav css underline dropdown nav tab underline animation menu details summary native html details element dropdown native disclosure dropdown details summary animation checkbox hack dropdown css checkbox hack mobile nav input:checked dropdown nested dropdown menu multi level dropdown css nested submenu css two level dropdown icon sidebar flyout vertical rail flyout menu icon nav with flyout segmented pill dropdown pill navigation dropdown color picker dropdown css color swatch picker dropdown context menu css right click context menu context menu javascript custom context menu preventdefault contextmenu keyboard accessible dropdown keyboard navigation dropdown roving tabindex dropdown aria-expanded dropdown aria-haspopup dropdown wcag dropdown menu section 508 dropdown eu eaa dropdown accessible dropdown menu focus trap dropdown command palette css cmd k command palette search palette dropdown spotlight search css raycast inspired command palette autocomplete dropdown css autocomplete suggestion list typeahead dropdown css combobox dropdown css aria-autocomplete stagger blur entrance blur fade dropdown click outside dropdown click outside to close outside click handler dropdown multi select dropdown css chip dropdown multi-select tag select dropdown tailwind dropdown tailwind dropdown menu tailwind hover dropdown tailwind focus-within dropdown tailwindcss dropdown bootstrap dropdown css bootstrap 5 dropdown alternative headlessui dropdown alternative radix ui dropdown alternative shadcn dropdown alternative react dropdown menu react dropdown component vue dropdown svelte dropdown next.js dropdown material ui dropdown mui menu component chakra ui dropdown menu mantine dropdown ant design dropdown framer motion dropdown react-aria menu downshift autocomplete alternative combobox aria patterns dropdown layout shift cls dropdown core web vitals dropdown inp lighthouse dropdown audit axe devtools dropdown dropdown position fixed dropdown z-index dropdown overflow hidden dropdown clipped by parent dropdown not showing popover api css popover attribute html anchor positioning dropdown css anchor positioning css-only no javascript mit licensed navigation patterns","category":"collection","href":"/navigation/css-dropdown-menus/"},{"title":"16 CSS Fade In Animation Designs","description":"16 hand-coded CSS fade-in animations with live demos — pure-opacity hero fade with staggered delays, clip-path inset reveal, blur defocus, staggered grid cascade, scroll-triggered IntersectionObserver reveal, directional slide-fade up, scale-up zoom-in, scale-down zoom-in, rotateX perspective tilt, word-by-word split, skew sweep, radial clip-path mask reveal, greyscale-to-color saturate, rotateY flip card, glitch flash multi-step, and cascade letter drop. 13 pure CSS + 3 with a tiny vanilla JS snippet — no framework. animation-fill-mode forwards, prefers-reduced-motion honoured, MIT licensed.","tags":"css fade in animation fade in animation css css fade in effect fade in css css fade animation fade animation css css text fade in css opacity animation css fade in keyframes fade in keyframes css css fade in transition fade transition css css fade in tutorial css fade in copy paste free css fade in fade in animation 2026 modern fade in css css fade in on scroll fade in on scroll css scroll fade in css scroll triggered fade css scroll reveal css scroll animation fade scroll fade animation fade in when scrolled into view fade in as you scroll scroll-driven fade-in intersection observer fade in intersection observer reveal intersection observer scroll animation js intersection observer animation vanilla js scroll animation scroll animation no library css animation fill mode forwards animation-fill-mode forwards css forwards animation css animation hold final state animation-delay css staggered animation delay css css stagger animation css opacity transition opacity 0 to 1 animation css opacity keyframes from opacity 0 to opacity 1 opacity animation css css blur fade in blur defocus animation filter blur fade css filter animation blur to clear css css clip-path fade in clip-path inset reveal clip-path circle reveal radial clip-path mask clip-path animation css slide fade in slide up fade in css slide down fade in fade in from bottom css fade in from left css directional fade in css fade in slide animation css scale fade in zoom in fade css scale up fade in scale down fade in transform scale fade css rotate fade in rotatex fade in rotatey flip card css perspective tilt fade 3d fade in css word by word fade in letter by letter fade in split text animation css cascade letter drop text reveal animation stagger word animation css greyscale to color grayscale fade in css saturate animation css filter saturate fade desaturate fade in css glitch fade in glitch flash animation multi-step keyframe animation complex keyframe css rgb glitch fade css skew fade skew animation css diagonal sweep fade css hero fade in hero section fade in landing page fade in css fade in headline css fade in cta above the fold fade in tailwind fade in tailwind animate fade-in tailwindcss fade animation tailwind v3 fade in tailwind v4 fade in tailwind animate.css alternative react fade in react fade in animation framer motion fade in alternative vue fade in animation svelte fade in astro fade in scss fade in mixin animate.css fade-in animate.css alternative gsap fade in alternative anime.js fade in alternative lottie fade in alternative fade in accessibility wcag fade in animation prefers-reduced-motion fade accessible fade in motion sensitivity fade in vestibular safe animation section 508 motion eu eaa motion wcag 2.2 motion css fade in performance core web vitals fade in fade in cls fade in cumulative layout shift fade in inp lighthouse fade in gpu accelerated fade in fade in chrome safari firefox fade in browser support fade in caniuse css fade in not working fade in disappears animation fill mode none fade in flashes back css fade in jumps css-only no javascript pure css fade in mit licensed motion effects","category":"collection","href":"/motion/css-fade-in-animation/"},{"title":"10 CSS Feature Sections","description":"10 hand-coded CSS feature section templates covering the patterns landing pages actually need in 2026 — icon grid with stats strip, Apple-style bento grid layout, dark glassmorphism with animated blobs, scroll-reveal alternating rows, developer SDK with syntax-highlighted code preview, side-by-side comparison table with pricing cards, full SaaS hero with mesh-gradient + social proof, 3D mousemove tilt cards, parchment-cream floating phone mockup, and Linear-style product roadmap timeline. 7 of 10 demos are 100% pure CSS — drop into any stack. The 3 JS-enhanced demos (scroll-reveal, 3D tilt, timeline-glow) degrade gracefully if JavaScript is disabled. Every demo respects prefers-reduced-motion, uses scoped .fsNN__* class names so multiple can coexist, and ships MIT-licensed.","tags":"css feature section feature section css feature sections css feature sections landing page features features section template feature grid layout icon grid features bento grid features bento layout features saas feature section saas features section feature comparison table css scroll reveal feature cards intersection observer feature cards feature section without javascript feature section without tailwind tailwind feature section alternative pure css feature section feature section with code preview developer feature section feature section dark mode glassmorphism feature cards feature section dark glassmorphism 3d tilt feature cards mouse parallax feature cards feature section 3d perspective cards feature section with floating mockup phone mockup css css iphone mockup timeline feature layout product roadmap feature section feature cards with icons feature section with stats feature section with stats strip feature section examples 2026 apple style feature section linear style feature section stripe style feature section vercel feature section feature section copy paste responsive feature section feature section accessibility feature section prefers-reduced-motion css bento grid bento grid layout css marketing feature section feature section template free mit licensed feature section layouts","category":"collection","href":"/layouts/css-feature-sections/"},{"title":"15 CSS Flexbox Layouts","description":"15 production-ready CSS flexbox layouts with live demos and copy-paste code — holy grail page shell, responsive card grid, sticky navbar, masonry-style columns, sidebar dashboard, product cards, pricing table, magazine article, sticky footer with min-block-size: 100dvh, centered hero, vertical timeline, chat interface, mosaic gallery, two-column form, and kanban board. Every demo is mobile-first, WCAG-friendly, and works without a build step.","tags":"css flexbox flexbox layout css flexbox layout flexbox layout examples flexbox tutorial display flex flex-direction justify-content align-items align-content flex-wrap flex-grow flex-shrink flex-basis gap row-gap column-gap flex container flex item flex-flow main axis cross axis responsive flexbox mobile-first flexbox flexbox responsive design flexbox holy grail css holy grail layout holy grail layout flexbox flexbox 3 column layout flexbox card grid responsive card grid flexbox flexbox card layout css card grid no media queries flexbox navbar flexbox navigation bar responsive navbar flexbox flex space-between navbar sticky navbar flexbox flexbox masonry flexbox masonry alternative css masonry layout flexbox sidebar dashboard flexbox dashboard layout css admin dashboard layout sidebar layout flexbox flexbox product cards responsive product grid css ecommerce product cards flexbox pricing table css pricing table 3 column css pricing tier card flexbox magazine layout css magazine article layout flexbox sticky footer css sticky footer no hack min-block-size 100dvh 100dvh sticky footer sticky footer modern centered hero section flexbox flexbox center vertical horizontal place-items center alternative flexbox vertical timeline css timeline flexbox chat interface flexbox css chat bubble layout messenger ui flexbox flexbox image gallery mosaic gallery flexbox flexbox form layout two column form flexbox fieldset legend form flexbox kanban board kanban board layout css drag drop kanban flexbox flexbox vs grid flexbox vs css grid when to use flexbox when to use grid flexbox grid difference flexbox grid which one flexbox or grid 2026 flex-grow vs flex-basis flex-shrink vs flex-basis justify-content vs align-items justify-content space-between justify-content space-around justify-content space-evenly align-items center align-items flex-start align-self override order flex item flex-wrap responsive flex-wrap wrap flex 1 1 0 flex 1 explained flex 0 0 auto flex initial flex none flex auto min-width 0 flex child flex item overflow flexbox text overflow flexbox not working flexbox items wrap flexbox items overflow flexbox bug fix flex-shrink prevent collapse flexbox image overflow flexbox vertical scroll tailwind flex tailwind flex utilities tailwind flexbox equivalent tailwind flex-1 tailwind justify-between bootstrap 5 flex bootstrap d-flex bootstrap flex utilities bootstrap row col flex css-in-js flexbox styled-components flex emotion flex shadcn ui layout mui flex layout chakra ui flex react flexbox vue flexbox svelte flexbox next.js layout flexbox wcag 2.2 flexbox section 508 layout accessibility eu eaa flexbox keyboard navigation flexbox focus management navbar skip link layout lighthouse layout shift core web vitals cls core web vitals inp axe-core layout audit css flexbox cheatsheet flexbox copy paste production flexbox patterns mit licensed layouts css-only","category":"collection","href":"/layouts/css-flexbox-layouts/"},{"title":"23 CSS Flip Cards","description":"23 production-ready CSS 3D flip cards — product feature comparison, e-commerce pricing plans, gift card coupon reveal, bi-fold event ticket, team bio, skill rating, language flashcards, trivia Q&A, gaming trading cards, photo gallery overlay, video playlist thumbnails, testimonial reviews, digital business vCard, restaurant menu recipe, step-by-step process map, vertical rotateX flip, click-to-flip JavaScript toggle, dynamic-height auto-resize, responsive CSS Grid flip card matrix, luxury cube-unfold book-open flip, diagonal rotate3d travel postcard, clip-path iris aperture album reveal, and a clip-path diagonal peel scratch-card reward reveal. 21 pure CSS + 2 CSS + JS — copy, paste, ship.","tags":"css flip cards flip card css 3d flip card css card flip animation flashcard css hover flip card click to flip card javascript vertical flip card","category":"collection","href":"/components/css-flip-cards/"},{"title":"32 CSS Floating Action Button Designs","description":"32 hand-coded CSS floating action button templates covering every FAB pattern production apps actually ship in 2026 — Material Design gradient FAB with ripple, speed dial fan-out menu, morph-expand FAB, scroll-to-top with progress ring, floating chat widget, fan arc menu, squircle FAB, social share FAB, glassmorphism FAB, neon glow, compose+tooltip, draggable FAB, notification bell with badge, floating cart with item counter, magnetic hover FAB, theme toggle, classic plus, pulse ring, morphing FAB, labeled pill, neon cyber, brutalist stamp, loading spinner, drag handle, voice action, premium aurora, quick reply, square modern, and more. All use semantic <button> elements with proper aria-labels, 44×44px minimum tap targets, prefers-reduced-motion support, scoped class names so all 32 coexist on the gallery page, and ship MIT-licensed. 19 are 100% pure CSS — drop into any stack. The 13 JS-enhanced demos use vanilla JavaScript with no library dependencies.","tags":"floating action button fab fab button fab design fab css css floating action button css fab css fab button css fab menu css fab examples floating button floating button css floating action button css material fab material design fab material gradient fab speed dial fab speed dial menu fab speed dial morph fab morphing fab expanding fab fab expand menu fan arc fab radial fab menu scroll to top button scroll to top progress ring scroll to top fab floating chat widget chat fab messenger fab support chat button squircle fab rounded square fab social share fab share floating button glassmorphism fab glass fab glass floating button neon glow fab cyberpunk fab neon floating button tooltip fab compose fab draggable fab drag fab movable floating button notification bell fab notification fab floating cart cart fab shopping cart floating button magnetic hover fab magnetic button effect theme toggle fab dark mode toggle fab fab without javascript pure css fab fab without library fab without framer motion tailwind fab alternative fab tailwind ui alternative fab prefers-reduced-motion fab accessibility accessible fab fab aria-label fab tap target fab examples 2026 fab template free mit licensed fab react fab alternative vue fab astro fab android-style fab ios floating button material 3 fab fab implementation floating button bottom right fab positioning components","category":"collection","href":"/components/css-floating-buttons/"},{"title":"15 CSS Footer Designs","description":"15 hand-coded CSS footer designs — aurora-drift, newspaper masthead, mega multi-column, CTA stripe, trust badges, vinyl record, neon sign, FAQ drawer, language switcher, hover wave and more. Copy-paste ready.","tags":"footer page footer css footer site footer newsletter footer navigation ui templates","category":"collection","href":"/layouts/css-footer-designs/"},{"title":"12 CSS Glassmorphism Designs","description":"12 free CSS glassmorphism designs — cards, modals, navigation, form surfaces and layered effects with copy-paste HTML and CSS.","tags":"glassmorphism frosted glass backdrop-filter glass card frosted modal design-styles css-only","category":"collection","href":"/design-styles/css-glassmorphism/"},{"title":"16 CSS Gradient Animations","description":"16 hand-coded CSS gradient animations with live demos — aurora mesh hero background, diagonal sweeping linear gradient, radial glow split, dark-mode subtle mesh pulse, glow-on-hover accent button, animated gradient border card, metallic shimmer skeleton loader, neon flowing underline link, infinite gradient text animation, hover-reveal text fill, glassmorphism moving backdrop, retro vaporwave cyberpunk mesh, liquid lava lamp blob, striped progress bar loader, file upload streaming state, and animated toggle switch track glow. 4 pure CSS + 12 with a small vanilla JS snippet — no framework. Modern @property typed-angle + conic-gradient + animation-timeline techniques, prefers-reduced-motion honoured, WCAG 2.2 AA compliant, MIT licensed.","tags":"css gradient animation gradient animation css animated gradient css css gradient animations 2026 css gradient animation examples css gradient animation snippets css gradient animation copy paste free css gradient animations modern css gradient animations gradient animation library gradient animation collection best gradient animations css animated background css css animated background moving gradient background css gradient background animation animated hero background css hero gradient gradient hero section css aurora gradient animation aurora mesh gradient aurora background css northern lights css borealis gradient stripe-style gradient vercel-style gradient linear-style gradient mesh gradient animation css mesh gradient animated mesh gradient mesh gradient hero stripe mesh gradient vercel mesh gradient tailwind mesh gradient diagonal gradient sweep sweeping gradient css diagonal animated gradient gradient pan animation radial gradient animation animated radial gradient radial glow css radial glow split spotlight gradient dark mode mesh pulse dark mode gradient dark theme animated gradient dark hero background glow on hover button css glow button neon glow button button gradient glow css button hover glow animated gradient border gradient border animation css gradient border card animated border @property conic-gradient border metallic shimmer skeleton css skeleton loader skeleton shimmer animation skeleton loading css shimmer skeleton placeholder facebook skeleton css linkedin skeleton css neon flowing underline animated link underline css link gradient underline neon link css underline gradient animation infinite gradient text animated gradient text css infinite text gradient animation looping gradient text hover reveal text fill css text fill hover hover text gradient css text fill animation glassmorphism animated backdrop moving glassmorphism animated glass background backdrop-filter animation retro vaporwave gradient vaporwave css cyberpunk gradient synthwave gradient css 80s gradient css outrun gradient css liquid lava lamp css lava lamp blob animation blob gradient animation morphing blob css liquid blob css striped progress bar css progress bar animation animated progress loader loading bar css progress stripes css file upload streaming css upload progress animation data stream gradient loading state gradient toggle switch glow css toggle gradient animated switch css switch track glow @property typed angle @property gradient css typed custom properties registered custom property animation @property syntax angle color interpolation @property conic-gradient animation conic gradient css animation animated conic gradient rotating conic gradient conic gradient rotation animation-timeline scroll gradient scroll-driven gradient animation view-timeline gradient scroll-linked gradient intersection observer gradient background-position animation background-position keyframe animated background-position css background sweep color-mix gradient oklch gradient animation display-p3 gradient wide gamut gradient modern css color animation css gradient animation accessibility wcag gradient animation accessible gradient animation prefers-reduced-motion gradient vestibular safe gradient wcag 2.2 gradient animation wcag 2.3.3 animation from interactions eu eaa gradient animation section 508 gradient uk equality act animation canada aca animation tailwind gradient animation tailwindcss animated gradient tailwind aurora gradient tailwind mesh utility react gradient animation vue gradient animation svelte gradient animation next.js gradient astro gradient framer motion gradient alternative gsap gradient alternative anime.js gradient alternative lottie gradient alternative shadcn gradient animation magic ui aurora aceternity ui gradient mui gradient chakra gradient ant design gradient mantine gradient css gradient animation cls gradient animation cumulative layout shift gradient animation performance compositor-only gradient css gradient animation lcp css gradient animation inp core web vitals gradient lighthouse gradient animation css gradient hero landing page saas hero gradient agency hero gradient portfolio gradient hero css gradient animation browser support @property safari firefox conic-gradient safari css animation safari css-only no javascript mit licensed motion effects free for commercial use open source gradient animations","category":"collection","href":"/motion/css-gradient-animation/"},{"title":"20 CSS Gradient Text Designs","description":"20 hand-coded CSS gradient text effects with live demos — animated flow with @property typed angle, aurora borealis sweep, conic hue spin, per-letter rainbow wave, lava lamp radial, neon pulse glow, outline stroke with transparent fill, metallic chrome/gold/copper, holographic iridescent foil, duotone two-colour fill, texture fills (sunset, starfield, ocean), liquid mercury, hover reveal, checkbox toggle picker, scroll reveal, click ripple, cursor-tracked radial, typewriter loop, glitter sparkle, and crystalline prism. 16 pure CSS + 4 with a tiny vanilla JS snippet — no framework. Modern background-clip text technique with -webkit-prefix fallback, prefers-reduced-motion honoured, MIT licensed.","tags":"css gradient text gradient text css text gradient css css gradient text effect gradient text effect css css gradient text examples css gradient text code css gradient text copy paste free gradient text css gradient text css generator alternative gradient text designs gradient text effects 2026 modern gradient text background-clip text background-clip text css webkit-background-clip text -webkit-background-clip text css text-fill-color transparent css gradient text fill css clip text gradient css mask text gradient css gradient fill text animated gradient text animated gradient text css gradient text animation css css gradient text animation flow gradient text moving css shimmer text css gradient text shimmer infinite gradient text animation css text gradient infinite loop rainbow text css rainbow gradient text rainbow text effect css per-letter gradient text letter-by-letter rainbow css rainbow text animation multicolor text css conic gradient text conic gradient text css conic-gradient text effect conic hue spin text @property gradient text @property typed custom property text css custom property animation text neon text css neon gradient text neon glow text effect css neon pulse text glowing gradient text text-shadow gradient metallic text css chrome text effect css gold text css copper text gradient metallic chrome gold copper text shiny text effect css css metallic gradient text holographic text css iridescent text effect holographic foil text holographic gradient text css rainbow foil text duotone text css two color text gradient duotone gradient text effect split color text css texture fill text css text texture pattern sunset gradient text starfield gradient text ocean gradient text css text image fill background-image text fill liquid mercury text metallic mercury text effect fluid metal text css silver gradient text outline gradient text stroked gradient text css text outline gradient fill -webkit-text-stroke gradient css text stroke gradient outlined transparent gradient text hover reveal text gradient text on hover css text hover gradient reveal gradient text underline hover scroll reveal text scroll-driven gradient text intersection observer gradient text scroll-timeline text click ripple text interactive gradient text gradient text click effect ripple gradient text cursor tracked gradient text css cursor radial gradient text mousemove gradient text spotlight gradient text typewriter gradient text typing gradient text effect css typewriter loop gradient text typewriter animation glitter sparkle text css sparkle text shimmer sparkle gradient text diamond gradient text crystalline prism text prismatic gradient text rainbow prism text effect tailwind gradient text tailwind bg-clip-text tailwind text-transparent tailwindcss gradient text tailwind v3 gradient text tailwind v4 gradient text tailwind bg-gradient-to-r react gradient text vue gradient text svelte gradient text next.js gradient text astro gradient text scss gradient text mixin styled-components gradient text shadcn gradient text mui gradient text alternative chakra gradient text ant design gradient text headless ui gradient text oklch gradient text display-p3 gradient text color-mix gradient text light-dark gradient text modern color gradient text wide gamut gradient text gradient text not showing background-clip text not working background-clip text safari gradient text invisible safari webkit-background-clip text fallback gradient text browser support gradient text contrast wcag accessible gradient text gradient text screen reader gradient text accessibility wcag gradient text section 508 gradient text eu eaa gradient text gradient text hero headline gradient text logo gradient text cta button gradient text branding gradient text marketing css-only no javascript pure css gradient text mit licensed design styles","category":"collection","href":"/design-styles/css-gradient-text/"},{"title":"24 CSS Grid Layouts","description":"24 hand-coded CSS grid layouts — holy grail, 12-column, bento, masonry, subgrid, dashboard, kanban, container queries and more. Pure CSS, copy-paste ready.","tags":"css grid grid layout css layout responsive grid subgrid masonry bento container queries","category":"collection","href":"/layouts/css-grid-layouts/"},{"title":"20 CSS Hamburger Menus","description":"20 hand-coded CSS hamburger menus with live demos — pure-CSS checkbox-hack toggle (no JavaScript), morphing icon animations, full-screen overlay, slide-out sidebar with push-canvas, responsive navbar, floating FAB radial menu, Tailwind CDN build, Bootstrap 5 navbar, WCAG-accessible aria pattern, grid-template-rows accordion, blur overlay, mobile bottom nav, multi-level nested dropdown, flexbox right-aligned, circular ripple expand, sticky shrinking header, neumorphic toggle, brutalist border, and a 3D rotating canvas push. 16 with a small vanilla JS snippet, 4 truly pure CSS. prefers-reduced-motion respected, scoped class names, WCAG 2.2 aria-expanded + aria-controls patterns demonstrated, MIT-licensed.","tags":"css hamburger menu css hamburger menu no javascript pure css hamburger menu css checkbox hack menu hamburger menu animation css morphing hamburger icon css css full screen overlay menu slide out sidebar css off canvas menu css responsive navbar hamburger toggle tailwind hamburger menu bootstrap 5 navbar hamburger accessible hamburger menu wcag aria-expanded hamburger menu css grid-template-rows accordion menu css blur overlay hamburger mobile bottom nav hamburger multi level dropdown menu css flexbox navbar hamburger circular expand mobile menu sticky shrinking header css neumorphic hamburger toggle brutalist hamburger menu 3d rotating canvas mobile menu css bars to x morph hamburger button css mobile menu css navigation css-only","category":"collection","href":"/navigation/css-hamburger-menus/"},{"title":"11 CSS Header Designs","description":"11 hand-coded CSS header designs covering the patterns search demand actually targets — pure-CSS sticky header that solidifies on scroll using scroll-timeline (no JavaScript, no scroll listener, zero impact on Core Web Vitals), CSS Grid mega menu with :focus-within keyboard accessibility, performance-first flexbox 3-column navbar, full-screen overlay hamburger header via checkbox hack, glassmorphism transparent bar with backdrop-filter, sticky announcement bar with grid-template-rows dismiss animation, two-tier double-decker enterprise header, animated link hover effects (scaleX underline, clip-up fill, gradient sweep, dual-layer swap, bracket reveal), vertical sidebar navigation with persistent rail, three-level multi-level dropdown menu via :focus-within, and a shrinking header on scroll using animation-timeline. 10 truly pure-CSS, 1 with a tiny optional vanilla JS snippet. WCAG-aware, prefers-reduced-motion respected, scoped class names that never collide with your existing styles, MIT-licensed.","tags":"css header designs css header design css sticky header css sticky header on scroll without javascript scroll-timeline css sticky header css fixed header pure css sticky header css mega menu css mega menu focus-within css grid mega menu css mega menu without javascript flexbox 3 column header flexbox navbar css hamburger menu header pure css hamburger menu full screen overlay menu css glassmorphism header css backdrop-filter header glass css transparent header css announcement bar sticky announcement bar css css announcement bar dismiss grid-template-rows accordion collapse two tier header double decker header css utility bar header animated nav link hover effects css underline animation nav css link hover effects vertical sidebar navigation css sidebar layout fixed sidebar css multi level dropdown menu css three level nested dropdown css nested menu without javascript shrinking header on scroll css scroll-driven animation header animation-timeline scroll css css header best practices core web vitals header css css header layout examples responsive css header css header tutorial layouts css-only","category":"collection","href":"/layouts/css-header-designs/"},{"title":"30 CSS Hero Sections","description":"30 hand-coded CSS hero sections — gradient mesh, glassmorphism, bento, terminal, parallax, 3D card stack, conic orbit and more. No images, copy-paste ready.","tags":"hero section landing page saas hero css hero gradient mesh glassmorphism responsive hero","category":"collection","href":"/layouts/css-hero-sections/"},{"title":"30 CSS Hover Effects","description":"30 hand-coded CSS hover effects covering every production interactive pattern in 2026 — text hover (underline draw, glitch, letter-spacing expand, gradient reveal, split text, neon glow), button hover (magnetic liquid, border draw, shimmer shine, fill wipe, 3D press, ripple), card hover (3D tilt, flip, glassmorphism, spotlight, slide reveal, stack lift), image hover (zoom-pan, color channel split, distortion, duotone, curtain reveal, Ken Burns), navigation hover (underline slide, highlight fill, strikethrough link, inline word swap), and pointer-tracking effects (cursor dot trail, magnetic pull). 24 demos are 100% pure CSS using <code>:hover</code> + GPU-accelerated <code>transform</code> / <code>opacity</code> transitions; 6 use ~30-60 lines of vanilla JavaScript for pointer-coordinate tracking. All respect <code>prefers-reduced-motion</code>, use scoped <code>.hv-NN__*</code> class names so multiple effects coexist on the same page without style bleed, ship INP-safe (no layout-triggering animations), MIT-licensed. Drop into React, Vue, Astro, Svelte, Rails ERB, plain HTML, or WordPress — zero framework dependencies.","tags":"css hover effects css hover effect hover effects css hover effect css css :hover css hover animation css hover transition hover animation css css hover css examples css hover code hover effects code hover effects copy paste css hover copy paste hover css snippets css text hover effects css text hover animation text hover css css link hover effects link hover css css link hover animation css underline hover underline hover effect css underline draw underline animation css css underline slide css underline draw effect css link underline animation css button hover effects button hover css button hover animation css button hover transition css button hover effects free magnetic button hover magnetic button css css magnetic button effect border draw hover border animation on hover css border draw button shimmer button hover shine button hover shimmer effect css button fill wipe button hover css button fill animation 3d button hover effect css 3d button press ripple button hover ripple effect css button css card hover effects card hover css card hover animation card hover effect css css 3d tilt card hover 3d card hover effect card flip hover css flip card hover css card flip effect glassmorphism card hover glass card hover spotlight card hover card spotlight effect slide reveal card stack lift hover css card stack lift css image hover effects image hover css image hover animation image zoom on hover css image zoom hover image pan hover css ken burns hover ken burns effect css image distortion hover color channel split hover rgb split hover effect css duotone image hover curtain reveal image hover image reveal on hover navigation hover effects nav hover effects css navigation menu hover effect nav link hover css menu hover animation underline slide nav highlight fill nav strikethrough link hover inline word swap hover css word swap hover magnetic cursor effect cursor trail effect dot trail cursor css cursor dot trail magnetic pull effect cursor follow css pointer tracking hover mouse follow effect magnetic hover effect css text glitch hover glitch text hover effect css gradient text hover gradient text reveal hover split text hover effect css neon glow text hover neon text hover effect letter spacing expand hover hover effects without javascript pure css hover effects css only hover effects vanilla css hover hover effects without library react hover effects vue hover effects tailwind hover effects tailwindcss hover tailwind hover utility tailwind ui hover effects framer motion alternative react-spring alternative gsap hover alternative anime.js hover alternative auto-animate alternative react-tilt alternative vanilla tilt alternative hover effect accessibility wcag hover effect prefers-reduced-motion hover vestibular accessibility hover accessible hover effects hover effect inp core web vitals hover gpu accelerated hover compositor thread hover transform opacity hover css transition performance css hover effects 2026 modern css hover effects mit licensed hover effects hover effects free production css hover effects","category":"collection","href":"/motion/css-hover-effects/"},{"title":"16 CSS Image Gallery Designs","description":"16 hand-coded CSS image gallery designs with live demos — CSS columns masonry grid, click-to-zoom lightbox overlay with focus trap, infinite scroll filmstrip, polaroid stack, tilt parallax cards with mousemove tracking, magazine grid layout, mosaic zoom hover, metro tile grid, perspective depth stack, diagonal clip-path slice reveal, glassmorphism hover cards, 3D cube viewer with perspective rotateY navigation, scattered random-rotation polaroid wall, Ken Burns auto-advancing slideshow, and accordion image gallery. 7 pure CSS + 9 with a tiny vanilla JS snippet — no framework. Every photo is an illustrated inline SVG scene (not a gradient placeholder), prefers-reduced-motion honoured, MIT licensed.","tags":"css image gallery image gallery css css photo gallery photo gallery css css gallery gallery css css gallery layout image gallery layout css css image gallery examples css image gallery code css image gallery copy paste free css image gallery css image gallery 2026 modern image gallery css css image gallery tutorial css masonry gallery masonry image grid css columns masonry css masonry layout pinterest style gallery masonry photo grid css lightbox lightbox without javascript css lightbox overlay css lightbox no js pure css lightbox lightbox image gallery css :target lightbox checkbox-hack lightbox modal image overlay lightbox focus trap accessible lightbox infinite scroll gallery css infinite scroll infinite scrolling images infinite carousel css filmstrip carousel css horizontal scroll gallery polaroid gallery css polaroid stack effect scattered photos css random rotation gallery photo wall css tilted photo gallery css tilt parallax mousemove parallax css 3d tilt image hover parallax image cards css vanilla js parallax magazine layout css editorial gallery layout magazine grid css asymmetric image grid broken grid layout css mosaic gallery css css mosaic grid mosaic image zoom image mosaic hover metro tile gallery windows metro grid css tile grid css uniform tile gallery perspective gallery css depth stack gallery 3d perspective image stack stacked card gallery diagonal slice gallery diagonal clip-path image split diagonal reveal css diagonal image hover glassmorphism gallery frosted glass gallery cards backdrop-filter gallery glass card hover gallery 3d cube gallery css 3d cube viewer cube image rotator perspective rotatey gallery ken burns slideshow css ken burns effect css css slideshow auto advance css photo slideshow image slideshow css accordion image gallery image accordion css horizontal image accordion expanding image gallery hover expand gallery responsive image gallery mobile image gallery css image gallery flexbox image gallery grid image gallery layout patterns tailwind image gallery tailwind masonry tailwind lightbox tailwindcss gallery tailwind gallery component react image gallery alternative react-photo-gallery alternative react-image-gallery alternative lightgallery alternative fancybox alternative photoswipe alternative lightbox2 alternative magnific popup alternative next.js image gallery vue image gallery svelte image gallery astro image gallery gatsby image gallery mui imagelist alternative chakra image gallery shadcn image gallery alternative image gallery accessibility wcag image gallery alt text image gallery keyboard accessible gallery screen reader gallery lightbox aria-modal focus trap gallery escape key close lightbox section 508 image gallery eu eaa image gallery image gallery performance lazy loading images loading lazy attribute intersection observer image lazy cls image gallery image gallery core web vitals lcp image gallery responsive images srcset image gallery image optimization webp avif image gallery css image gallery hover effect image hover zoom css image hover overlay css image caption hover css ecommerce product gallery portfolio image gallery wedding photography gallery real estate image gallery art gallery website image gallery not responsive image gallery layout shift image gallery broken mobile image gallery slow loading css-only no javascript mit licensed ui snippets","category":"collection","href":"/snippets/css-image-gallery/"},{"title":"20 CSS Image Hover Effects","description":"20 hand-coded CSS image hover effects with live demos — zoom-in card, hover reveal text overlay, e-commerce product image swap, grid blur overlay, slide-up caption, grayscale-to-color, color tint overlay, neumorphic image card, glassmorphism overlay, glowing neon border, clip-path morphing, 3D tilt perspective, shining glare sweep, split transition, ripple animation, spinning avatar border, fullscreen background swap, masonry zoom, icon reveal centre, and 3D card flip. 18 pure CSS + 2 with a tiny vanilla JS snippet — no framework. Modern @property + animation-timeline techniques, prefers-reduced-motion honoured, CLS-safe via aspect-ratio, WCAG 2.2 AA compliant, MIT licensed.","tags":"css image hover effects image hover effects css css hover image effects image hover effect hover image effect css css hover effects on images css image hover examples css image hover snippets css image hover copy paste free css image hover effects css image hover 2026 modern css image hover effects css image hover library best css image hover effects css image hover animation css image hover zoom image hover zoom in hover zoom css css zoom on hover image image zoom on mouseover css scale image hover transform scale image hover css hover reveal text over image hover image reveal text image overlay text on hover css text over image hover image caption on hover css e-commerce product image swap hover product image hover swap shopify product image hover woocommerce image hover bigcommerce image hover magento image hover product card hover swap css product gallery hover image blur overlay hover css blur image hover backdrop-filter image hover hover blur reveal css image slide up caption hover css slide up overlay image caption slide hover css grayscale to color hover image grayscale hover css filter grayscale image hover saturate hover image image desaturate hover css image color tint hover hover color overlay image image mix-blend-mode hover css image filter hover neumorphic image card hover neumorphism image hover soft ui image hover skeuomorphic image hover glassmorphism image hover frosted glass image hover backdrop-filter blur image glass overlay image neon border image hover glowing image hover css neon glow image @property image border conic-gradient image border animated image border clip-path image hover css clip-path morph image image mask reveal hover polygon clip image hover 3d tilt image hover image tilt parallax hover vanilla-tilt alternative react-parallax-tilt alternative tilt.js alternative css 3d perspective image rotatex rotatey image hover shining glare image hover shine sweep image css shimmer image hover image split transition hover image clip reveal hover split image animation css image ripple animation hover css ripple effect image ripple expand hover circular team avatar hover team profile avatar css spinning border avatar avatar hover rotate fullscreen bg image hover background-image hover swap css bg-image hover transition masonry zoom gallery hover css masonry hover image grid zoom hover icon reveal image center hover css play icon overlay image overlay icon hover 3d card flip image hover css flip card image rotatey card flip image flip animation hover portfolio image hover css portfolio thumbnail hover case study hover effect agency portfolio hover blog feature image hover blog card image hover article thumbnail hover css image hover accessibility wcag image hover accessible image hover alt text image hover screen reader image hover prefers-reduced-motion image hover motion sensitivity image hover vestibular safe image hover wcag 2.2 image hover wcag 2.3.3 animation from interactions eu eaa image hover section 508 image hover uk equality act hover canada aca hover australian dda hover css image hover cls image hover cumulative layout shift aspect-ratio image hover core web vitals image lighthouse image hover css image hover lcp css image hover inp hover.css alternative ian lunn hover.css animate.css image alternative vanilla-tilt.js alternative framer motion image alternative gsap image hover alternative anime.js image hover alternative lottie image hover alternative tailwind image hover tailwind hover scale tailwind group-hover tailwindcss image hover react image hover vue image hover svelte image hover next.js image hover astro image hover shadcn image hover magic ui image hover aceternity ui image hover mui image hover chakra image hover ant design image hover mantine image hover headlessui image hover radix image hover tailwind ui image hover alternative @property image hover animation-timeline scroll image view-timeline image intersection observer image hover compositor-only image hover gpu accelerated image hover will-change transform image css-only no javascript mit licensed motion effects free for commercial use open source image hover effects","category":"collection","href":"/motion/css-image-hover-effects/"},{"title":"28 CSS Input Field Designs","description":"28 hand-coded CSS input field designs — floating label, OTP, password strength, voice search, autocomplete, range slider, credit card and more. Semantic HTML, copy-paste ready.","tags":"input field form input text input form ui components css forms ui templates css-only","category":"collection","href":"/components/css-input-fields/"},{"title":"30 CSS Keyframe Animations","description":"30 hand-coded CSS @keyframes animations covering every production motion pattern in 2026 — loading spinners (6 variants), typewriter text effect, bouncing ball, pulse-glow buttons, morphing blobs, particle burst, ocean waves, 3D flip cards, neon flicker, skeleton loading shimmer, glitch text, solar-system orbit, liquid-fill progress, stagger list reveal, fire animation, ripple click, floating elements, infinite-scroll ticker (marquee replacement), countdown timer, path drawing, spotlight, spring bounce, confetti explosion (no canvas), breathing meditation pulse, typewriter-delete loop, aurora borealis background, card stack reveal, kinetic typography, morphing progress steps, and animated gradient mesh background. All 30 are 100% pure CSS — zero JavaScript, zero libraries, zero dependencies. GPU-accelerated via transform + opacity (compositor-thread, 60fps on mid-tier mobile, INP-friendly). Each demo uses scoped .kf-NN__* class names + prefixed @keyframes names so all 30 coexist on the same page. Respects prefers-reduced-motion. MIT-licensed.","tags":"css keyframe animation css keyframes @keyframes css css animation examples css animation code css keyframe examples keyframe animation css css keyframes tutorial css animation tutorial css animation library alternative pure css animation css animation without javascript css animation no library vanilla css animation zero dependency animation css loading spinner keyframes css spinner animation css loader animation css typewriter effect css typing animation css typed.js alternative typed.js alternative css bouncing ball animation css pulse animation pulse glow button css css morphing blob morphing blob animation css particle burst css particles no canvas particle animation without canvas css wave animation css ocean wave css 3d flip card 3d card flip animation css neon flicker animation neon sign css css skeleton loading skeleton shimmer css react-loading-skeleton alternative css glitch text glitch text effect css css orbit animation solar system css animation css liquid fill liquid progress bar css css stagger animation stagger list reveal css fire animation fire effect pure css css ripple click ripple effect keyframes css floating animation css infinite scroll ticker infinite marquee css marquee replacement css css countdown timer animated countdown css css path drawing svg path animation css css spotlight effect spotlight animation css spring bounce spring physics css css confetti animation css confetti no js canvas-confetti alternative confetti explosion css css breathing animation breathing pulse meditation css typewriter delete loop infinite typewriter css css aurora borealis aurora animation css northern lights css css card stack animation stacked cards css animation css kinetic typography kinetic text animation morphing progress steps css animated stepper css css gradient mesh animation animated gradient background css mesh gradient css animation css animation react css animation vue css animation astro css animation svelte css animation angular framer motion alternative gsap alternative lottie alternative react spring alternative css animation library comparison gpu accelerated animation 60fps css animation compositor thread animation css animation performance inp score animation core web vitals animation animation-timing-function cubic-bezier animation animation-iteration-count animation-delay css steps() timing function animation-fill-mode css animation prefers-reduced-motion css animation accessibility wcag 2.3.3 animation vestibular accessibility css keyframe examples 2026 css animation copy paste mit licensed css animation motion","category":"collection","href":"/motion/css-keyframe-animations/"},{"title":"20 CSS Link Hover Effect Designs","description":"20 free CSS link hover effects — animated underlines, glitches, neon flickers, marker highlights, 3D flips and more, with copy-paste code.","tags":"css link hover link effects underline animation blinking link text hover hover effects motion css-only interactive","category":"collection","href":"/motion/css-link-effects/"},{"title":"20 CSS Loaders","description":"20 hand-coded CSS loaders covering every production loading-indicator pattern developers reach for in 2026 — spinning ring loader (the canonical Material Design pattern), dot chase loader, skeleton screen loader (Facebook/LinkedIn/YouTube content-shimmer pattern), progress bar loader with shimmer, bouncing balls loader, DNA double-helix loader, glitch flicker loader, heartbeat pulse loader, circular progress with percentage, liquid fill loader, neon arc spinner, cube flip 3D loader, audio wave bars loader, morphing square loader, orbit planet loader, typing dots indicator (chat/messaging pattern), staircase step loader, infinity loop loader, gradient conic spinner (Instagram-stories pattern), and particle burst loader. All <strong>100% pure CSS</strong> — zero JavaScript, zero libraries (no react-loading-skeleton, no react-spinners, no SpinKit copy, no loading.io snippet). Every loader uses CSS <code>@keyframes</code> animation on <code>transform</code> + <code>opacity</code> only (GPU-accelerated, INP-safe — no layout thrash). Every demo includes proper <code>role=\"status\"</code> + <code>aria-live=\"polite\"</code> markup so screen readers announce \"loading\" state correctly. Every demo respects <code>prefers-reduced-motion</code>, uses scoped <code>.ld-NN__*</code> class names so multiple loaders coexist on the same page without style bleed, MIT-licensed. Drop into React, Vue, Astro, Svelte, Rails ERB, plain HTML, WordPress — zero framework dependencies.","tags":"css loaders css loader loading animation css css loading animation loading spinner css css loading spinner loading indicator css css loading indicator spinning loader css css spinning ring loader css ring loader css spinner rotating loader css loader animation css loader animation preloader css css preloader css page loader css website loader css site loader css loading screen css splash screen loading screen css spinner animation css css spinner animation skeleton screen css css skeleton loader skeleton loader css skeleton ui css shimmer effect css shimmer loading animation content placeholder loader facebook skeleton screen linkedin skeleton loader youtube skeleton loader instagram loader css progress bar loader css css progress bar animation indeterminate progress bar circular progress loader css circular progress ring progress loader svg progress ring percentage loader css bouncing balls loader dot loader css three dots loader css css three dots animation typing dots animation typing indicator css chat typing indicator messaging loading indicator discord typing dots whatsapp typing animation css dna helix loader double helix animation css scientific loader css css glitch loader glitch effect loader cyberpunk loader css heartbeat loader css pulse loader css css pulse animation loader liquid fill loader water loader css css liquid animation css neon spinner neon arc loader gaming loader css css cube loader 3d cube loader css css 3d cube animation css 3d loader cube flip loader wave bars loader css audio bars loader css audio visualizer music player loader css morphing loader morphing square animation shape morph loader orbit loader css planet orbit loader solar system loader css staircase loader css step loader css css ladder loader infinity loop loader css infinity animation möbius loader gradient spinner css css conic spinner instagram stories loader rainbow loader css css particle burst loader explosion loader css burst animation loader loaders without javascript pure css loaders css loaders without library css only loaders vanilla css loaders react spinners alternative react-spinners alternative react-loading-skeleton alternative spinkit alternative loading.io alternative loaders.css alternative epicspinners alternative tailwind loader alternative bootstrap spinner alternative material ui loader alternative mui circular progress alternative chakra ui spinner alternative ant design spin alternative loader react loader vue loader angular loader svelte loader astro loader copy paste loader template free mit licensed css loaders css loader examples 2026 loader accessibility accessible loader aria-live loader aria-busy loader role status loader screen reader loader wcag loader loader prefers-reduced-motion vestibular accessibility loader loader inp score loader core web vitals gpu accelerated loader compositor thread loader motion","category":"collection","href":"/motion/css-loader-designs/"},{"title":"15 Pure CSS Loading Animations","description":"15 hand-coded CSS loading animations — DNA helix, liquid blob, orbit system, neon ring, hourglass flip, listing skeleton, building loader and more. Pure CSS, drop-in ready.","tags":"loading spinner animation css-only motion skeleton progress","category":"collection","href":"/motion/css-loading-animations/"},{"title":"24 CSS Login Form Designs with Live Demos","description":"24 modern CSS login form designs — glassmorphism, neon, dark mode, OTP, biometric passkey, magic link, multi-step, password strength meter and more. Copy-paste HTML & CSS, accessible, mobile-first.","tags":"login form sign in form authentication auth ui components css forms ui templates css-only","category":"collection","href":"/components/css-login-forms/"},{"title":"14 Material Design CSS Components","description":"14 hand-coded Material Design CSS components covering every production Material Design 3 (Material You) pattern in 2026 — Material elevated/filled/outlined buttons with ripple, elevated content cards, sidebar + top app bar navigation, floating-label form inputs, dialog modal with backdrop, sortable data table, ripple-driven tabs, removable chips with leading icons, vertical stepper, four tooltip variants, accordion expansion panels, two-line list with leading avatars, the full 500-shade Material color palette swatcher, and a complete responsive app shell with collapsible drawer. All <strong>100% pure CSS</strong> — zero JavaScript, zero libraries (no Material UI, no MUI, no Material Components Web, no MDL). Interactive behaviour driven by checkbox / radio state machines + <code>:checked</code> / <code>:has()</code> selectors. Every demo respects <code>prefers-reduced-motion</code>, uses scoped <code>.md-NN__*</code> class names so multiple components coexist on the same page, and ships MIT-licensed. Drop into React, Vue, Astro, Svelte, Rails, plain HTML — zero framework dependencies.","tags":"material design css material design material design 3 material you material design components material ui css material ui alternative mui alternative material ui without javascript material design without library pure css material design material design vanilla css material components web alternative mdc web alternative material design lite alternative mdl replacement material design 3 components md3 components material 3 buttons material 3 cards material 3 tabs material 3 chips material design buttons css material elevated button material filled button material outlined button material button ripple material design card css material design card elevation material design navigation css material top app bar material navigation drawer material design form inputs material text field css material floating label input material outlined text field material design dialog css material modal css material design data table css material data grid material design tabs css material design chip css material assist chip material filter chip material design stepper css material design tooltip css material design expansion panel material accordion css material design list css material two-line list material design color palette material color palette css material indigo amber palette material design app shell material navigation drawer collapsible material design react alternative material design vue material design angular alternative material design svelte material design astro google material design android ui css material design web wear os ui style tailwind material design tailwind material ui alternative bootstrap material alternative material design tutorial material design code examples material design open source material design free material design template material design accessibility material design wcag material design prefers-reduced-motion material design dark mode material design examples 2026 material design copy paste mit licensed material design css design system google design system css design-styles","category":"collection","href":"/design-styles/css-material-designs/"},{"title":"6 CSS Mega Menus & Dropdown Menus","description":"6 hand-coded CSS mega-menu and dropdown layouts — luxury editorial fashion, cyberpunk terminal panel, biophilic architecture studio, Swiss-grid department store, precision outdoor gear finder, and flash-sale command center. Hover + click/tap. Copy-paste ready, accessible, mobile-friendly.","tags":"mega menu dropdown menu navigation header menu nav bar site navigation css mega menu multi-column menu","category":"collection","href":"/navigation/css-mega-menus/"},{"title":"6 CSS Minimalist UI Designs","description":"6 hand-coded CSS minimalist UI screen mocks covering the surfaces minimalist design has to win — a dark SaaS dashboard, a Florentine luxury e-commerce storefront, a brutalist-white creative portfolio, a broadsheet editorial layout, a fintech mobile app inside a realistic phone frame, and a high-impact single-product SaaS landing page. Built on strategic whitespace, crisp typography hierarchy, and disciplined colour systems. Pure CSS plus scoped JS — no UI framework, no images.","tags":"minimalist minimal minimalist ui ui design saas dashboard ecommerce portfolio editorial landing page fintech mobile app design styles design css design","category":"collection","href":"/design-styles/css-minimalist-ui/"},{"title":"16 CSS Mobile Navigation Patterns","description":"16 hand-coded CSS mobile navigation patterns covering every production mobile-nav use case in 2026 — hamburger slide-out drawer, full-screen overlay menu, iOS-style bottom tab bar (Apple Human Interface Guidelines), morphing hamburger-to-X animation, radial fan menu, swipe-gesture sidebar (Facebook Messenger pattern), FAB speed dial navigation, tab bar with sliding indicator pill, mega-menu accordion, glassmorphism nav drawer, cyberpunk neon menu, minimal dot navigation, breadcrumb collapse for deep hierarchies, split-screen navigation, command-palette search (Cmd+K pattern), and neumorphic bottom navigation. 13 demos are 100% pure CSS using <code>:checked</code> state machines — drop into any stack with zero JS dependencies; 3 use ~40-60 lines of vanilla JavaScript for swipe gestures, dot-scrolling, and command-palette filtering. All ship 44×44px tap targets (WCAG 2.5.5), <code>aria-current=\"page\"</code> on active links, <code>aria-expanded</code> on toggles, respect <code>prefers-reduced-motion</code>, scoped <code>.mn-NN__*</code> class names so multiple navs coexist without style bleed, MIT-licensed. Drop into React, Vue, Astro, Svelte, Rails, plain HTML.","tags":"mobile navigation css css mobile nav mobile menu css css mobile menu responsive navigation responsive nav css mobile nav patterns mobile ui navigation mobile menu design hamburger menu css hamburger drawer slide out menu css slide out drawer off canvas menu off canvas nav full screen overlay menu full screen mobile menu overlay navigation css bottom tab bar ios bottom tab bar ios style navigation ios tab bar css bottom navigation android android bottom nav material bottom navigation morphing hamburger animation hamburger to x animation morphing menu icon animated menu icon radial menu css fan menu css radial fan menu swipe gesture sidebar swipe menu css swipe to open menu facebook messenger swipe drag to open drawer fab speed dial speed dial menu floating action button menu fab menu css sliding indicator pill tab bar indicator css sliding tab indicator mega menu mobile accordion mega menu mega menu accordion css glassmorphism nav glass nav drawer frosted glass menu cyberpunk neon menu neon menu css gaming nav css dot navigation minimal dot menu carousel dot nav breadcrumb mobile collapsed breadcrumb responsive breadcrumb split screen nav command palette css cmd k menu command k search spotlight search nav neumorphic bottom nav neumorphic navigation soft ui nav mobile nav without javascript pure css mobile nav mobile nav without library react native web nav alternative react navigation alternative react navigation mobile alternative tailwind mobile nav bootstrap mobile nav alternative material design mobile nav alternative ant design mobile nav alternative mobile nav react mobile nav vue mobile nav svelte mobile nav astro mobile nav angular mobile nav accessibility accessible mobile menu aria-expanded menu aria-current page keyboard navigation mobile screen reader mobile menu wcag mobile menu tap target 44px mobile menu prefers-reduced-motion mobile nav examples 2026 mobile nav template free mit licensed mobile navigation mobile nav copy paste responsive nav copy paste navigation","category":"collection","href":"/navigation/css-mobile-navigation/"},{"title":"8 CSS Navbar Designs","description":"8 hand-coded CSS navbar patterns covering the surfaces every site needs to handle — a responsive hamburger drawer, a mega menu with hover panels, a floating glassmorphism nav, a collapsible vertical sidebar, a sticky scroll-transforming bar, a full-screen overlay menu, a navbar with a dark-mode toggle, and a minimalist navbar with underline hover animations. Pure CSS plus scoped JS — no UI framework, semantic HTML, accessibility-first.","tags":"navbar navigation navigation bar menu hamburger menu mega menu sidebar sticky nav glassmorphism overlay menu dark mode theme toggle underline animation hover animation ui design navigation css design","category":"collection","href":"/navigation/css-navbars/"},{"title":"15 CSS Navigation Menu Designs","description":"15 hand-coded CSS navigation menu designs covering every production navigation pattern developers ship in 2026 — horizontal navigation bar with hover underline, dropdown navigation menu, full mega menu with category columns and feature panel, hamburger menu with slide-out drawer, full-screen overlay navigation, sticky navigation bar with scroll shrink (scroll-driven CSS animation), sidebar navigation menu, tab navigation with animated sliding indicator, breadcrumb navigation, glassmorphism navigation (frosted-glass backdrop-filter pattern), animated navigation icons with labels, multi-level accordion navigation, navigation with magnetic hover effect, neon glow navigation menu, and morphing navigation pill indicator. 13 demos are 100% pure CSS using <code>:hover</code> + <code>:focus-within</code> + <code>:checked</code> state machines — drop into any stack with zero JS dependencies. 2 use ~20-50 lines of vanilla JavaScript for sticky-scroll behaviour and pointer-tracking magnetic hover effects. All ship semantic <code>&lt;nav&gt;</code> + <code>&lt;ul&gt;</code> markup with <code>aria-current=\"page\"</code> on the active link, <code>aria-expanded</code> on toggles, <code>aria-haspopup</code> on dropdown triggers, respect <code>prefers-reduced-motion</code>, use scoped <code>.nav-NN__*</code> class names so multiple navs coexist on the same page without style bleed, ship with 44×44px tap targets (WCAG 2.5.5), MIT-licensed. Drop into React, Vue, Astro, Svelte, Rails ERB, plain HTML, WordPress, Shopify, or any other stack.","tags":"css navigation menu navigation menu css css nav menu nav menu css css navigation navigation css css navigation bar navigation bar css css navbar navbar css responsive navigation menu responsive nav menu responsive navbar css responsive navigation horizontal navigation menu horizontal nav bar css horizontal nav vertical navigation menu vertical nav css dropdown menu css css dropdown menu dropdown navigation nested dropdown menu css multi level dropdown mega menu css css mega menu mega menu navigation mega menu responsive ecommerce mega menu shopify mega menu hamburger menu css css hamburger menu hamburger drawer slide out menu off canvas menu off canvas navigation full screen menu full screen overlay menu full screen navigation sticky navigation bar sticky navbar css sticky header css sticky nav scroll shrink shrinking header css css sticky nav scroll-driven navbar sidebar navigation css css sidebar nav sidebar menu css collapsible sidebar sidebar drawer tab navigation css css tab navigation tab indicator css sliding tab indicator animated tab underline breadcrumb navigation breadcrumb css breadcrumb trail breadcrumbs design schema breadcrumb glassmorphism navigation glass nav css frosted glass nav frosted glass menu backdrop-filter nav icon navigation icon nav with labels animated nav icons css animated icons multi level menu multi level nav css accordion menu css accordion navigation nested nav css magnetic hover effect magnetic button hover css magnetic hover pointer tracking hover cursor magnetic effect neon menu css neon glow nav neon navigation cyberpunk navigation gaming nav css morphing pill nav morphing indicator pill indicator css animated pill nav navigation without javascript pure css navigation navigation without library react navigation alternative tailwind navigation alternative tailwind ui navigation alternative bootstrap navbar alternative material design navigation alternative mui appbar alternative ant design menu alternative chakra ui nav alternative headlessui nav alternative radix navigation alternative navigation react navigation vue navigation svelte navigation astro navigation angular navigation accessibility accessible navigation menu aria-current page aria-expanded aria-haspopup keyboard navigation menu screen reader navigation wcag navigation navigation skip link tap target 44px navigation prefers-reduced-motion css navigation 2026 navigation template free mit licensed navigation navigation copy paste responsive navigation copy paste wordpress navigation menu shopify navigation menu ecommerce navigation saas navigation menu dashboard navigation navigation","category":"collection","href":"/navigation/css-navigation-menu-designs/"},{"title":"12 CSS Neon Designs","description":"12 hand-coded CSS neon designs covering the full vocabulary of the aesthetic — glowing buttons, retro signage, rotating-border pricing cards, an 80s synthwave scene, futuristic controls, three nav patterns, broken/flickering signs, a cyberpunk palette token showcase, a Tailwind theme.extend neon config, drop-shadow SVG icon glows, an infinite seamless 3D perspective grid, and five rainbow text cycling techniques. Pure CSS plus scoped JS — no images, no SVG filters, every glow is layered shadow.","tags":"neon glow cyberpunk synthwave retro rainbow flicker tailwind drop-shadow design styles design ui design css design","category":"collection","href":"/design-styles/css-neon/"},{"title":"13 CSS Neumorphism & Soft UI Designs","description":"13 hand-coded CSS neumorphism (soft-UI) widgets — meditation timer, vinyl music player, smart-home panel, button anatomy lab, audio mixing console, form studio, dark teal IoT hub, champagne finance dashboard with animated credit card, ripple-animated calculator, asymmetric weather grid with live clock, pure-CSS form controls showcase, rose parchment profile + testimonial layout, and a dark-mode neon system hub with glowing neumorphism. Fully interactive, palette-scoped, accessible.","tags":"neumorphism soft ui neumorphic design soft shadow design styles ui design css design","category":"collection","href":"/design-styles/css-neumorphism/"},{"title":"15 CSS Number Counter Animations","description":"15 animated number counter examples — count-up stats, flip-digit play counters, fundraising arc meters, product launch countdowns, CO₂ impact dashboards, uptime SLA monitors, stock tickers, fitness rings and full design-language KPI dashboards. Tiny requestAnimationFrame easing in pure JS, the chrome around each counter in pure CSS. Copy, paste, ship.","tags":"css number counter count up animation count up on scroll animated statistics stat counter kpi counter dashboard counter css ticker flip counter countdown timer progress ring counter requestanimationframe counter css-only javascript counter","category":"collection","href":"/motion/css-number-counter-animations/"},{"title":"11 CSS Page Transitions","description":"11 free CSS page transition patterns — fade, slide, scale/zoom, clip-path wipe, blur morph, 3D page turn, ink bleed, triangle shatter, split curtain, matrix rain and brushstroke. Complete interactive demos with copy-paste HTML, CSS and JavaScript.","tags":"css page transitions page transition fade transition slide transition zoom transition clip-path transition page turn view transition ui motion css-only","category":"collection","href":"/motion/css-page-transitions/"},{"title":"10 CSS Parallax Effects","description":"10 hand-coded CSS parallax effects covering the patterns search demand actually targets — multi-layer scroll hero, cinematic SVG landscape with 5 depth layers, sticky scroll sections (Stripe / Linear marketing pattern), multi-scene sticky-pinned parallax journey, asymmetric image grid parallax, sticky horizontal-scroll panels driven by vertical scroll, text overlay texture, mouse-position 3D card tilt, zoom-in depth illusion, and backdrop-filter blur cross-fade transition. All 10 use requestAnimationFrame-throttled scroll/mouse listeners for the parallax math. Every demo respects prefers-reduced-motion, scoped class names, MIT-licensed.","tags":"css parallax css parallax effect css parallax effects css parallax scroll css parallax design css parallax hero css parallax hero section multi layer parallax css parallax background css css parallax landscape svg parallax css horizontal parallax scroll horizontal parallax scroll css sticky parallax css sticky parallax sections parallax storytelling parallax card hover mouse parallax css 3d card tilt css css zoom parallax css depth parallax scroll-driven animation parallax animation-timeline scroll background-attachment fixed alternative parallax prefers-reduced-motion parallax accessibility css parallax tutorial parallax depth illusion multi scene parallax full page parallax scroll css parallax website examples parallax marketing page parallax stripe linear style css parallax with backdrop-filter motion","category":"collection","href":"/motion/css-parallax-designs/"},{"title":"18 CSS Play / Pause Button Designs","description":"18 free CSS play / pause button designs for audio, video and podcast UIs — copy-paste HTML, CSS and JS.","tags":"play button pause button media controls audio ui video player components css buttons ui templates","category":"collection","href":"/components/css-play-pause-buttons/"},{"title":"21 CSS Pricing Sections","description":"21 hand-coded CSS pricing sections — three-tier cards, comparison tables, billing toggles, usage sliders, per-seat calculators. Copy-paste ready, accessible, mobile-first.","tags":"pricing section saas pricing pricing table css pricing comparison table monthly yearly toggle usage based pricing per seat calculator","category":"collection","href":"/layouts/css-pricing-sections/"},{"title":"12 CSS Progress Bar Designs","description":"12 hand-coded CSS progress bar designs — liquid fill, step tracker, conic ring, segmented battery, skill bars, speed gauge and more. Semantic HTML, copy-paste ready.","tags":"progress bar loader step tracker circular progress gauge skill bar components css-only","category":"collection","href":"/components/css-progress-bars/"},{"title":"18 CSS Radio Button Designs","description":"18 hand-coded CSS radio buttons — pill slider, magnetic orb, ink drop, segmented bar, pricing tier, glow pulse and more. Accessible, drop-in ready.","tags":"radio buttons css radio buttons form inputs pill toggle segmented control components css-only interactive","category":"collection","href":"/components/css-radio-buttons/"},{"title":"20 CSS Responsive Navbar Designs","description":"20 hand-coded CSS responsive navbar designs with live demos — glassmorphism frosted bar, CSS-only mega menu, sidebar drawer, animated underline tabs, pill highlight, scroll-shrink on scroll, synthwave neon, reading-progress breadcrumb, split two-tone, mobile bottom tab bar, conic-gradient animated border, centered logo, icon dot indicator, full-screen overlay, morphing search expand, floating island, step wizard, vertical rail, dual announcement bar, and scroll-spy active highlight. 14 pure CSS + 6 with a tiny vanilla JS snippet — no framework. Mobile-first, WCAG-friendly, copy-paste ready, MIT licensed.","tags":"css responsive navbar responsive navbar css responsive navigation bar responsive nav css responsive nav bar responsive header css responsive css navbar tutorial responsive navbar examples responsive navbar template responsive navbar code responsive navbar copy paste free responsive navbar responsive navbar 2026 modern responsive navbar css navbar navbar css css navigation menu css navigation bar navigation bar css header navigation css site navigation css primary navigation css css glassmorphism navbar frosted navbar css glass navbar css backdrop-filter navbar translucent navbar css css mega menu mega menu dropdown css mega menu navbar mega menu pure css css mega menu no javascript multi column mega menu css sidebar drawer navigation off canvas menu css slide out sidebar css drawer navigation css sidebar menu css side drawer css off-canvas drawer animated underline tabs css tab underline animation sliding underline nav active underline navbar css tab navigation css animated nav link underline pill navigation css pill highlight navbar sliding pill nav css active pill indicator css rounded pill nav css css pill tabs scroll shrink navbar shrink on scroll navbar sticky shrink header css scroll-aware header navbar shrinks on scroll compress header scroll scroll-driven animation header scroll-timeline navbar neon navbar css synthwave navbar dark neon navbar cyberpunk navbar css glowing navbar css reading progress bar scroll progress navbar css reading progress indicator breadcrumb progress bar scroll percent bar page scroll progress split navbar css two tone navbar split background navbar bottom tab bar css mobile bottom navigation css bottom nav pwa bottom tab bar ios style bottom nav bottom tab bar web mobile-only bottom nav css gradient border navbar animated gradient border conic gradient border css css @property gradient border animated border navbar centered logo navbar split nav with centered logo airline navbar css logo in center navbar icon dot indicator navbar active dot navbar css indicator dot nav fullscreen overlay menu fullscreen mobile menu css fullscreen nav overlay fullscreen menu animation fullscreen overlay nav morphing search expand search expand navbar expanding search bar css search input animation morph search to input floating island navbar pill floating navbar floating nav design island navigation css step progress wizard wizard navbar css stepper navbar step indicator nav css step progress bar vertical rail sidebar vertical navigation rail side rail navbar vertical nav css announcement bar navbar dual top bar css promo bar navbar utility bar header css scroll spy navbar css scroll spy active section highlight on scroll intersection observer scroll spy scroll spy without library scrollspy navbar tailwind responsive navbar tailwind navbar component tailwind sticky navbar tailwind shrink navbar tailwindcss responsive nav bootstrap 5 navbar bootstrap responsive navbar bootstrap navbar collapse bootstrap mega menu bootstrap sticky navbar shadcn navbar alternative mui appbar alternative material ui navbar chakra navbar ant design navbar headless ui navbar radix navigation react responsive navbar vue responsive navbar svelte navbar astro navbar next.js navbar wcag responsive navbar accessible navigation menu navbar aria-current navbar aria-expanded skip link navbar keyboard navigation navbar focus trap menu section 508 navbar eu eaa navbar wcag 2.2 navigation core web vitals navbar navbar layout shift cls navbar inp lighthouse navbar audit navbar performance css content-visibility navbar intersection observer navbar intersection observer scroll spy scroll-driven animations @scroll-timeline css scroll-linked animation navbar overflow mobile navbar items wrap fix navbar layout shift fix navbar not sticky responsive navbar bug fix navbar overflow scroll css-only no javascript pure css navbar navigation patterns mit licensed","category":"collection","href":"/navigation/css-responsive-navbar/"},{"title":"12 CSS Retro UI Designs","description":"12 hand-coded retro / vintage UI designs covering the era-aesthetics search demand actually targets — pixel-faithful Windows 95 desktop in pure CSS (no framework dependency), CRT terminal with scanlines and boot reveal, 8-bit pixel-art buttons via box-shadow, neo-brutalism component toggle board, skeuomorphic cassette player, vaporwave scene with masked gradients, retro arcade game UI kit, working ASCII art bash interpreter, Web 1.0 / 90s guestbook with hit counter and webring, Y2K aqua-gloss kit, retro clothing-store storefront, and a draggable desktop-portfolio template. 10 truly pure-CSS, 2 with optional vanilla JS for the interactive bash + window-drag. Scoped class names that never collide, prefers-reduced-motion respected, MIT-licensed.","tags":"retro ui css vintage ui design retro web design css retro designs retro ui kit windows 95 ui css windows 98 css win95 ui template retro desktop css crt terminal css retro futuristic terminal scanline css effect 8 bit pixel art css pixel art ui css 8 bit button css neo brutalism css brutalist ui css css brutalist components skeuomorphic css cassette player css vaporwave css vaporwave aesthetic css synthwave css retro arcade ui arcade game ui kit ascii art css ascii web interface 90s website css guestbook widget css hit counter css webring css y2k aesthetic css y2k web design aqua gloss css retro store ui vintage catalogue css retro portfolio template draggable window css desktop portfolio css design-styles css-only","category":"collection","href":"/design-styles/css-retro-designs/"},{"title":"12 CSS Ripple Effects","description":"12 hand-coded CSS ripple animations covering every production pattern in 2026 — interactive water-surface click ripples with multi-ring concentric expansion, vanilla Material Design ink button ripple, animated pond background with bubble particles, neon glow ripple, pure-CSS ripple loading spinner, sonar ping for live status indicators, heartbeat pulse for medical and fitness UIs, ripple card hover effect, sound wave visualiser (no Web Audio API required), liquid drop animation, ripple-driven login form, and aurora borealis ripple background. All GPU-accelerated via transform + opacity only (no layout thrashing, 60fps on mid-tier mobile), respect prefers-reduced-motion, use scoped .rpl-NN__* class names so multiple can coexist on the same page, and ship MIT-licensed with zero framework dependencies. 6 demos are 100% pure CSS, 6 use vanilla JavaScript for click coordinates / particle spawning / live state.","tags":"css ripple css ripple effect css ripple effects css ripple animation ripple effect css ripple animation css material ripple material design ripple material ripple effect material 3 ripple material ripple vanilla css material ripple without library water ripple css water ripple click effect water ripple animation click ripple effect ripple on click ripple effect on click ripple effect on tap ripple click coordinates pond ripple css pond ripple background ripple background animation neon ripple animation neon glow ripple ripple loading spinner ripple loader css css loading ripple sonar ping animation sonar ripple css live status indicator css online status pulse pulse indicator css recording indicator css heartbeat pulse css heartbeat animation css medical ui pulse ripple card hover ripple hover effect card ripple effect sound wave css sound wave animation sound wave visualizer css audio visualizer css without web audio api liquid drop animation water drop css animation liquid effect css ripple login form ripple form ui form ripple effect aurora borealis css aurora ripple background aurora animation css ripple effect without javascript pure css ripple ripple without material ui ripple without library ripple effect react alternative ripple effect vue ripple effect tailwind ripple effect svelte ripple effect angular ripple effect astro tailwind ripple alternative material ui ripple alternative mdc web alternative ripple effect lottie alternative gpu accelerated ripple 60fps ripple animation transform-only animation compositor thread animation ripple performance ripple effect mobile ripple effect prefers-reduced-motion ripple effect accessibility accessible ripple css ripple examples 2026 ripple effect copy paste mit licensed ripple ripple effect template ripple effect tutorial css animation library alternative vanilla css animations motion","category":"collection","href":"/motion/css-ripple-designs/"},{"title":"12 CSS Scroll Animations","description":"12 full-page CSS scroll animation demos — sticky parallax cosmos, kinetic typography, staggered grid waves, animated data stats, clip-path reveals, 3D card entrances, scrollytelling product tours and more. Each demo is a complete, copy-paste-ready HTML document built with IntersectionObserver and scroll-linked motion.","tags":"css scroll animation scroll driven animation parallax scrolling kinetic typography scrollytelling reveal on scroll clip-path reveal 3d card animation scroll progress bar staggered animation sticky scroll intersection observer scroll snap image wipe","category":"collection","href":"/motion/css-scroll-animations/"},{"title":"32 CSS Search Box & Search Bar Designs","description":"32 hand-coded CSS search boxes and search bars — minimal underline, voice, autocomplete dropdown, recent searches, ⌘K command palette and more. Semantic forms, drop-in ready.","tags":"css search box search bar css search input css css search field autocomplete search components css-only forms","category":"collection","href":"/components/css-search-boxes/"},{"title":"16 CSS Side Menu Designs","description":"16 hand-coded CSS side menu designs with live demos — slide-in checkbox-hack drawer, smooth-overlay panel, off-canvas push sidebar, expandable icon-only rail, responsive hidden-to-visible menu, sticky fixed vertical nav, multi-level accordion, full-height flexbox, neumorphic inset, glassmorphism blurred, dark-mode cyberpunk neon, brutalist left-hand border, hamburger checkbox-hack, hover-triggered drawer, collapsible width-transition, and CSS-only accordion side navigation. 100% Pure CSS — no JavaScript, no framework. WCAG 2.2 friendly with prefers-reduced-motion on every animation, MIT licensed, copy-paste ready.","tags":"css side menu side menu css css side navigation css side drawer css side bar css side menu examples css side menu code css side menu copy paste free css side menu css side menu 2026 modern side menu css css side menu tutorial css side menu design pure css side menu css side menu no javascript css only side menu no js side menu css side menu checkbox hack css side menu input checked css side menu pure html css slide in side menu slide in side menu css slide in menu css slide out menu css slide menu animation css slide drawer left slide menu css right slide menu css off canvas menu css off canvas sidebar off canvas push sidebar off canvas drawer css push menu push sidebar css content push sidebar expandable icon sidebar icon only sidebar icon rail css collapsible icon rail vscode style sidebar discord style sidebar expandable side nav responsive side menu responsive sidebar css mobile side menu mobile drawer menu hidden to visible sidebar responsive hidden sidebar sticky side menu sticky sidebar css fixed vertical navigation fixed sidebar css position fixed sidebar sticky vertical menu multi level side menu multi level accordion sidebar nested side menu css submenu sidebar css accordion side navigation full height sidebar 100vh sidebar flexbox sidebar css grid sidebar full height flexbox nav neumorphic sidebar neumorphism sidebar soft ui sidebar neumorphic side menu inset shadow sidebar glassmorphism sidebar glassmorphic side menu backdrop filter sidebar frosted glass sidebar blur sidebar css dark mode sidebar cyberpunk sidebar neon sidebar css dark sidebar design cyberpunk navigation brutalist sidebar brutalist navigation left hand border navigation brutalist side menu hamburger checkbox hack checkbox hack menu hamburger menu css burger menu side hamburger sidebar css hover drawer css hover triggered sidebar hover sidebar reveal css hover drawer mouseover sidebar collapsible sidebar collapsible side menu width transition sidebar expand collapse sidebar css accordion side nav accordion sidebar details summary sidebar side menu wcag side menu accessibility accessible side menu wcag 2.2 side menu side menu aria-expanded side menu keyboard navigation side menu focus trap side menu screen reader side menu eu eaa side menu section 508 side menu ada compliance side menu uk equality act side menu canada aca side menu prefers-reduced-motion side menu reduced motion side menu accessibility tutorial tailwind side menu tailwind sidebar tailwind drawer tailwind ui sidebar tailwind off canvas shadcn sidebar shadcn side menu shadcn drawer shadcn ui sheet radix navigation menu radix dialog drawer mui drawer material ui drawer mui side menu chakra drawer chakra side menu mantine navbar mantine drawer headless ui disclosure aceternity sidebar magic ui sidebar react aria menu framer motion side menu framer motion drawer framer motion sidebar animation next js sidebar next js app router layout sidebar astro sidebar slot sveltekit layout sidebar remix sidebar layout css has selector sidebar css :has sidebar css starting style sidebar css anchor positioning sidebar view transition sidebar interpolate-size sidebar popover api sidebar html popover sidebar popover attribute sidebar rtl sidebar right to left sidebar rtl side menu css rtl navigation dashboard sidebar admin sidebar documentation sidebar saas sidebar ecommerce sidebar css side menu layout shift side menu core web vitals side menu cls side menu inp css side menu performance lighthouse sidebar axe devtools sidebar side menu seo free css side menu mit licensed sidebar copy paste side menu css side menu snippet css side menu source code sidebar menu using only html and css pure css drawer menu with overlay collapsible sidebar menu css sidebar with submenu css only sidebar expand on hover css responsive sidebar menu html css sidebar with hamburger menu css target sidebar :target off canvas menu sidebar focus-within css css :target side menu css has sidebar 2026 css-only no javascript mit licensed navigation patterns ui design navigation","category":"collection","href":"/navigation/css-side-menu/"},{"title":"23 CSS Sidebar Layouts","description":"23 hand-coded CSS sidebar layouts — fixed, collapsible, off-canvas, dual, mini icon rail, two-pane mail, three-pane workspace and more. Accessible, copy-paste ready.","tags":"css sidebar layouts sidebar menu css collapsible sidebar off-canvas drawer admin dashboard layout css navigation responsive sidebar css-only","category":"collection","href":"/layouts/css-sidebar-layouts/"},{"title":"10 CSS Sidebar Navigation","description":"Hand-coded CSS sidebar navigation patterns — collapsible rails, drawer menus with text and icons, nested vertical navigation, sidebar dropdowns, sticky full-height layouts, glassmorphic blur, mobile slide-out overlays, and bottom-pinned profile sidebars. Pure CSS, no framework, copy-paste ready.","tags":"sidebar sidebar navigation vertical menu side menu css side menu hide show click pure css drawer menu drawer menu text and icons nested vertical navigation css sidebar dropdown menu html css css sidebar scroll main content sticky vertical menu layout grid glassmorphic side nav blur effect cool modern css sidebar designs snippet mobile slide out sidebar css overlay responsive offcanvas drawer css push menu item to bottom sidebar layout profile section at bottom collapsible sidebar responsive sidebar off-canvas menu dashboard sidebar admin sidebar multi-level menu nested menu submenu accordion menu icon rail vertical rail checkbox hack pure css menu no javascript ui design navigation css design","category":"collection","href":"/navigation/css-sidebar-navigation/"},{"title":"12 CSS Skeleton Loaders","description":"12 hand-coded CSS skeleton loaders — classic shimmer, pulse, avatar card, image card, article page, table rows, stat tiles, comment thread and more.","tags":"skeleton loader loading placeholder css-only","category":"collection","href":"/components/css-skeleton-loaders/"},{"title":"25 CSS Spinners","description":"25 hand-coded CSS spinners covering every production loading-spinner pattern developers reach for in 2026 — neon arc with glowing leading-edge dot, dual counter-rotate ring spinner, dot chase orbit (Material Design indeterminate pattern), gradient conic sweep, heartbeat pulse, audio equalizer wave bars, stacked ring helix, morphing square-to-circle, comet trail with fading tail, DNA double helix, folding cube 3D grid (SpinKit's signature pattern), ripple pulse ring (concentric circles), clock tick sweep, infinity loop stroke, bouncing elastic dots, spiral galaxy, glassmorphism loader (backdrop-filter pattern), cyberpunk segmented ring (gamer/Web3 aesthetic), breathing circle, particle scatter burst, retro TV static noise loader, liquid blob morphing, progress arc fill (determinate variant), matrix rain column (cyberpunk vertical), and aurora orb. All <strong>100% pure CSS</strong> — zero JavaScript, zero libraries (no react-spinners, no react-loading-skeleton, no SpinKit copy, no loading.io snippet). Every spinner uses CSS <code>@keyframes</code> animating <code>transform</code> + <code>opacity</code> only (GPU-accelerated, INP-safe — no layout thrash). Every demo includes proper <code>role=\"status\"</code> + <code>aria-live=\"polite\"</code> markup so screen readers announce loading state correctly, respects <code>prefers-reduced-motion</code>, uses scoped <code>.sp-NN__*</code> class names so multiple spinners coexist on the same page without style bleed, MIT-licensed. Drop into React, Vue, Astro, Svelte, Rails ERB, plain HTML, WordPress — zero framework dependencies.","tags":"css spinner css spinners css spinner designs loading spinner css css loading spinner spinner animation css css spinner animation spinner css example css spinner code css spinner svg spinner css copy paste rotating spinner css rotating loader css css rotation animation spin animation css css spin animation circular spinner css ring spinner css css ring loader neon spinner css neon arc spinner glowing spinner css dual ring spinner dual counter rotate spinner counter rotating spinner two rings spinner css concentric ring spinner dot spinner css dot orbit spinner dot chase spinner css css dots loader three dots spinner css conic gradient spinner conic gradient loader gradient sweep spinner rainbow spinner css instagram stories spinner heartbeat spinner css pulse spinner css css pulse loader wave bars spinner audio bars spinner equalizer spinner css music spinner css soundwave spinner helix spinner css dna spinner css double helix loader scientific spinner css css morph spinner morphing shape spinner shape morph loader square to circle morph comet spinner css comet trail spinner shooting star spinner tail loader css folding cube spinner spinkit cube spinner spinkit alternative 3d cube spinner css ripple spinner css ripple pulse spinner concentric circle spinner concentric ripple css clock spinner css clock tick loader second hand spinner infinity loader css infinity loop spinner mobius spinner css lemniscate loader bouncing dots spinner elastic dots spinner bouncing balls loader spiral spinner css spiral galaxy spinner vortex spinner css glassmorphism spinner glass loader css frosted glass spinner cyberpunk spinner css segmented ring spinner gaming spinner css breathing spinner css breathing circle loader scaling pulse spinner particle spinner css particle burst spinner explosion spinner css retro tv loader tv static spinner noise loader css static noise spinner liquid spinner css liquid blob spinner blob morph loader fluid spinner css progress arc spinner determinate spinner css percentage spinner css circular progress spinner matrix spinner css matrix rain loader code rain spinner aurora spinner css aurora orb loader borealis spinner spinner without javascript pure css spinner css only spinner vanilla css spinner spinner without library react spinners alternative react-spinners alternative react-loading alternative spinkit css alternative loading.io alternative loaders.css alternative epicspinners alternative css.gg spinner alternative tailwind spinner alternative bootstrap spinner alternative material ui circular progress alternative mui spinner alternative chakra ui spinner alternative ant design spin alternative headlessui spinner spinner react spinner vue spinner svelte spinner angular spinner astro spinner next.js spinner remix spinner sveltekit mit licensed css spinners css spinner examples 2026 spinner copy paste spinner template free spinner accessibility accessible spinner css aria-live spinner aria-busy spinner role status spinner screen reader spinner wcag spinner spinner prefers-reduced-motion vestibular accessibility spinner spinner inp score spinner core web vitals gpu accelerated spinner compositor thread spinner motion","category":"collection","href":"/motion/css-spinner-designs/"},{"title":"22 CSS Split Screen Layouts","description":"22 hand-coded CSS split-screen layouts — classic 50/50, diagonal cut, hover-reveal, before/after slider, parallax scenes, 3D perspective and more. Responsive, copy-paste ready.","tags":"css split screen split screen layout two column hero diagonal split css before after slider hover reveal css landing page css-only","category":"collection","href":"/layouts/css-split-screen/"},{"title":"28 CSS Stacked Card Designs","description":"28 hand-coded CSS stacked-card designs with live demos — editorial hover-reveal deck, scroll-activated sticky stack, pure-CSS testimonial slider with radio inputs, 3D isometric pricing tiers, swipeable Tinder-style flashcards, minimalist bento grid with embedded mini-stack, poker-deck fan, botanical fan spread, scattered Polaroids, staircase bricks, glassmorphic perspective tunnel, iOS notification pile, receipt roll, real scratch-off cards and more. 20 pure CSS + 8 with a small vanilla JS snippet for drag/click/scroll interactivity. prefers-reduced-motion respected, scoped class names, MIT-licensed.","tags":"css stacked cards stacked card stack css scroll activated stacked cards sticky scroll stack css pure css testimonial slider css radio input slider isometric stacked cards 3d overlapping cards css bento grid stacked cards swipeable flashcard stack css css card stack hover reveal tinder swipe card stack css css deck of cards css fan cards css 3d flip stack css polaroid stack css notification stack css timeline stack css scratch card accordion stack css perspective card stack css css receipt unroll stacked card animation stacked card design components card stack","category":"collection","href":"/components/css-stacked-cards/"},{"title":"12 CSS Steppers","description":"12 hand-coded CSS stepper UI components covering every production multi-step flow pattern in 2026 — multi-step form wizard with progress indicator, numbered step progress bar, e-commerce checkout stepper with sidebar order summary, vertical timeline stepper, animated step indicator with icons, onboarding stepper flow (Notion/Linear/Vercel style), breadcrumb-style step tracker, stepper with validation states (success/error/warning), circular SVG progress indicator, glassmorphism stepper, dark mode stepper, and stepper with animated connector lines. All use semantic HTML with proper <code>aria-current=\"step\"</code> and <code>aria-valuenow</code> attributes for screen reader accessibility, scoped <code>.stp-NN__*</code> class names so multiple steppers coexist on the same page without style bleed, respect <code>prefers-reduced-motion</code>, and ship MIT-licensed. 11 use ~30-50 lines of vanilla JavaScript for step navigation, validation, and state persistence; 1 demo (the checkout stepper) is fully static — useful as a display-only progress indicator inside an existing wizard. Drop into any stack: React, Vue, Astro, Svelte, Rails ERB, plain HTML — zero framework dependencies.","tags":"css stepper css steppers stepper ui stepper component step indicator css step indicator step progress css multi step form css multi-step form css css multi step form multi step form wizard form wizard css css form wizard css wizard ui step progress bar step progress bar css numbered step progress checkout stepper checkout stepper css checkout flow ui ecommerce checkout css stripe checkout stepper shopify checkout stepper vertical timeline stepper vertical stepper css horizontal stepper css timeline stepper animated step indicator step indicator animation stepper animation css onboarding stepper onboarding flow css user onboarding wizard saas onboarding stepper notion onboarding style linear onboarding style vercel onboarding style breadcrumb stepper breadcrumb tracker breadcrumb-style step stepper validation states stepper error state stepper success state circular progress stepper svg progress indicator circular stepper css glassmorphism stepper glass stepper ui dark mode stepper stepper dark theme connector line animation step connector animation stepper without library stepper without javascript library material ui stepper alternative mui stepper alternative react stepper alternative react step wizard alternative react form wizard alternative tailwind ui stepper alternative bootstrap stepper alternative ant design stepper alternative chakra ui stepper alternative stepper react stepper vue stepper svelte stepper astro stepper angular stepper accessibility accessible stepper aria-current step aria-valuenow stepper keyboard navigation stepper screen reader stepper wcag stepper stepper prefers-reduced-motion stepper examples 2026 stepper template free mit licensed stepper stepper copy paste components","category":"collection","href":"/components/css-stepper-designs/"},{"title":"32 CSS Tab Designs","description":"32 CSS tab designs — 12 fan-favorite patterns (Ink Slider, Neon Electric, Brutalist Press, Chromatic, VS Code Files, iOS Segmented, Bento Grid, Vertical Dots, CRT Terminal, Morph Icon, Typewriter, Particle Burst) plus 20 typography-driven specimens. Sliding pills, halo blooms, drop caps, stencil cuts, folio folds. Each demo carries a distinct accent palette and motion choreography.","tags":"tabs tab navigation navigation typography css-only interactive segmented control ui components","category":"collection","href":"/navigation/css-tabs/"},{"title":"20 CSS Tags & Chips Designs","description":"20 hand-coded CSS tags and chips designs — removable filter, autocomplete input, status pulse, drag-to-reorder, marquee, undo and more. Semantic HTML, copy-paste ready.","tags":"css tags css chips filter chips tag input css badge snippets css-only interactive","category":"collection","href":"/snippets/css-tags-chips/"},{"title":"15 CSS Testimonials & Reviews","description":"15 hand-coded CSS testimonial layouts spanning editorial, brutalist, bento, neon, retro, minimal, crypto, edtech, luxury real estate, gaming, high fashion, fintech, SaaS minimal, horizontal profile, and portrait-led aesthetics. Copy-paste ready, accessible, mobile-first.","tags":"testimonials reviews social proof testimonial section css testimonial card review card customer reviews trust signals","category":"collection","href":"/components/css-testimonials-reviews/"},{"title":"25 CSS Text Animations","description":"25 hand-coded CSS text animations with live demos — typewriter, gradient text, glitch, neon glow, clip-path reveal, letter spacing, wave, shimmer, fade-up stagger, 3D flip, SVG stroke draw, bouncing letters, blur reveal, perspective rotation, text-shadow pulse, morphing text, liquid fill, word scramble, split-text explosion, holographic chrome, decryption, elastic bounce, cursor blink, mask wipe, and kinetic typography. 16 pure CSS (no JavaScript) + 9 with a tiny vanilla JS snippet — no framework. Modern @property + animation-timeline + variable-font techniques, prefers-reduced-motion honoured, WCAG 2.2 AA compliant, MIT licensed.","tags":"css text animations text animation css css text animation effects animated text css css text animation examples css text animation library css text animation snippets css text animation copy paste free css text animations css text animation 2026 modern css text animations css text animation collection best css text animations css typewriter effect typewriter animation css css typing animation css typewriter copy paste css gradient text animation animated gradient text background-clip text gradient css text gradient animation rainbow text css css conic-gradient text css glitch text glitch text effect css rgb glitch text chromatic aberration text css glitch text animation css neon text neon glow text css css text glow animation css text shadow neon glowing text css css text reveal clip-path text reveal css text mask reveal text reveal animation css css text scroll reveal css letter spacing animation css letter animation css text letter spacing expanding text css css wave text animation wavy text css wave text effect sin wave text css css shimmer text shine text animation css shimmer effect text css text shimmer loop css fade-up text fade in text animation css stagger text animation split text animation css css 3d text flip 3d text rotation css perspective text css css text 3d animation svg text stroke animation svg text path animation stroke-dashoffset text handwriting animation svg draw text svg css bouncing text bouncing letters css elastic text css css text bounce animation css blur reveal blur to clear text css text blur animation css perspective text rotation rotatey text css text flip 3d css css text shadow pulse text shadow animation pulsing text css css morphing text text morph animation shapeshifting text css morphing text effect css liquid fill text liquid text animation fluid text css text fill animation css word scramble scramble text effect text scramble animation text scramble js css split text split text explosion splittext alternative letter explosion css css holographic text holographic chrome text iridescent text css css chrome text css text decryption matrix text decode decode effect text decryption animation css elastic bounce text spring text animation elastic text effect css cursor blink blinking cursor css terminal cursor animation css mask wipe text css wipe reveal mask animation text css kinetic typography kinetic type css kinetic typography examples @property text animation @property gradient angle registered custom property css css typed custom properties animation-timeline scroll text scroll-driven text animation scroll-timeline css text intersection observer text variable font animation font-variation-settings animation css variable font morph wght axis animation css text animation accessibility wcag text animation accessible text animation aria-live text animation screen reader text animation prefers-reduced-motion text motion sensitivity text vestibular safe text animation wcag 2.2 text animation wcag 2.3.3 animation from interactions eu eaa text animation section 508 text animation uk equality act text animation canada aca text animation tailwind text animation tailwind typewriter effect tailwindcss text animation tailwind kinetic typography react text animation vue text animation svelte text animation next.js text animation astro text animation react-typewriter-effect alternative typed.js alternative typeit.js alternative splitting.js alternative framer motion text alternative gsap splittext alternative anime.js text alternative lottie text alternative shadcn text animation mui text animation chakra text animation ant design text animation mantine text animation headlessui text animation radix text animation css text animation cls text animation cumulative layout shift cls text fix core web vitals text css text animation performance compositor-only text animation gpu accelerated text css text animation lcp css text animation fcp css text animation inp lighthouse text animation axe devtools text wave accessibility text webaim text contrast css text animation hero landing page text animation portfolio text animation developer portfolio text animation saas hero text animation css text animation browser support background-clip text safari @property safari firefox css-only no javascript mit licensed motion effects free for commercial use open source text animations","category":"collection","href":"/motion/css-text-animations/"},{"title":"20 CSS Text Gradient Effects","description":"20 hand-coded CSS text gradient effects with live demos — hero title, Web3 neon glow, corporate logo, bold minimalist, hover transition, gradient button, active nav link, animated moving gradient, cyberpunk neon, metallic gold, glassmorphism contrast, pastel soft, vertical gradient, radial gradient, rainbow multi-colour, text stroke outline, @supports fallback pattern, Tailwind utility recipe, multiline paragraph, and dark-mode vs light-mode gradient swap via light-dark(). 18 pure CSS + 2 with a tiny vanilla JS snippet — no framework. Modern @property + animation-timeline + light-dark() techniques, prefers-reduced-motion honoured, WCAG 2.2 AA compliant, MIT licensed.","tags":"css text gradient effect text gradient effect css css gradient text effect gradient text effect css text gradient css gradient on text css text background gradient css text fill gradient css text gradient examples css text gradient snippets css text gradient copy paste free css text gradient effects css text gradient 2026 modern css text gradient effects css text gradient effects library best css text gradient effects css text gradient hero hero gradient text gradient hero title css css hero headline gradient saas hero gradient text landing page gradient text css gradient button text gradient button css gradient cta text css button gradient text primary button gradient active nav gradient css nav link gradient gradient active link nav item gradient text menu link gradient css hover gradient text hover gradient text transition css gradient text on hover hover text gradient animation gradient text hover effect css animated gradient text animated gradient text moving gradient text css css gradient text sweep gradient text loop css @property gradient text cyberpunk neon text css neon gradient text synthwave text gradient vaporwave text effect web3 neon text metallic gradient text css gold gradient text metallic chrome text silver gradient text metallic gold text effect glassmorphism text gradient frosted glass text backdrop-filter text glass text effect pastel gradient text soft gradient text muted gradient text css vertical gradient text css text gradient top to bottom linear-gradient text vertical radial gradient text css radial-gradient text spotlight gradient text rainbow text css multi-color gradient text conic-gradient text rainbow gradient effect outline gradient text css text-stroke gradient stroke text gradient outlined gradient text css gradient text fallback older browser gradient text @supports gradient text background-clip text fallback ie11 gradient text tailwind gradient text tailwind text gradient utility tailwindcss gradient text tailwind v3 gradient text tailwind v4 gradient text tailwind bg-clip-text css multiline gradient text gradient text wrap paragraph gradient text body copy dark mode gradient text light mode gradient text light-dark() gradient prefers-color-scheme gradient text dark mode gradient swap background-clip text -webkit-background-clip text background-clip text safari background-clip text firefox css mask-image text @property typed angle text css typed custom properties text registered custom property gradient animation-timeline scroll gradient text scroll-driven gradient text view-timeline text gradient color-mix text gradient oklch text gradient display-p3 text gradient wide gamut text gradient css color-4 gradient wcag gradient text contrast accessible gradient text screen reader gradient text wcag 1.4.3 gradient text wcag 2.2 gradient eu eaa gradient text section 508 gradient text uk equality act text gradient canada aca gradient australian dda gradient prefers-reduced-motion gradient motion sensitivity text vestibular safe gradient text css gradient text cls gradient text cumulative layout shift core web vitals gradient text lighthouse gradient text css gradient text inp css gradient text lcp compositor-only gradient text gpu accelerated gradient text react gradient text vue gradient text svelte gradient text next.js gradient text astro gradient text shadcn gradient text magic ui gradient text aceternity ui gradient text mui gradient text chakra gradient text ant design gradient text mantine gradient text headlessui gradient text radix gradient text tailwind ui gradient text alternative shadcn ui gradient alternative stripe gradient text vercel gradient text linear gradient text openai gradient text anthropic gradient text text-shadow gradient text trap filter drop-shadow gradient text transparent glyph shadow css text gradient browser support safari text gradient firefox text gradient edge text gradient chrome text gradient 120hz vrr gradient text linear() easing text gradient css-only no javascript mit licensed motion effects free for commercial use open source gradient text effects","category":"collection","href":"/motion/css-text-gradient-effect/"},{"title":"24 CSS Timeline Layouts","description":"24 hand-coded CSS timeline layouts — six field-study aesthetics (archaeological dig, concert tour stubs, surgical vitals trace, cinema reel, mission control terminal, fermentation jar calendar), twelve chronological patterns (thread, accordion, filmstrip, nature trail, terminal log, art deco, vertical centered, horizontal scroll, neon rail, editorial, stacked progress, brutalist grid), and six documentation layouts (changelog ticker, editorial spine, split-screen CV, railroad stations, film-strip portfolio, audit ledger). Copy-paste ready.","tags":"css timeline timeline layout vertical timeline horizontal timeline accordion timeline filmstrip incident log patient journey sustainability report brutalist roadmap neon rail stratigraphy tour stub vitals mission control calendar timeline changelog audit log career timeline portfolio gallery roadmap stations","category":"collection","href":"/layouts/css-timelines/"},{"title":"20 Pure CSS Toggles & Switches","description":"20 hand-coded CSS toggle switches with live demos — haptic keys, waveform, timed countdown, biometric scan, split-flap board, permission stack, iOS, Material Design, skeuomorphic, neon, brutalist, day/night, flip card, sliding pill, glassmorphism, rotary knob, iOS light, outline, bouncy pebble, and industrial rocker. Pure CSS, fully accessible, copy-paste ready.","tags":"toggle switch form ios-toggle css-only interactive checkbox dark-mode glassmorphism skeuomorphic bouncy organic haptic biometric split-flap permission","category":"collection","href":"/components/css-toggles-switches/"},{"title":"21 CSS Tooltips","description":"21 hand-coded CSS tooltips spanning icon toolbars, form-field help, code docs, editorial footnotes, profile cards, schematics, inventories, keyboard shortcuts, glossary words, status dots, table cells, content tags, departures boards, recipe ingredients, constellation maps, periodic-table elements, photo EXIF cards, org charts, and event timelines.","tags":"css tooltip tooltip design hover card icon toolbar tooltip form field help ide tooltip footnote tooltip profile card schematic annotation inventory tooltip keyboard shortcut glossary tooltip status dot tooltip avatar hover card table cell tooltip content tag tooltip departures board recipe tooltip constellation chart periodic table element photo exif org chart tooltip event timeline pure css hover","category":"collection","href":"/snippets/css-tooltips/"},{"title":"22 CSS Transition Effects","description":"22 hand-coded CSS transition effects covering every production motion pattern in 2026 — button hover transitions (9 polished variants: fill sweep, slide-up, neon glow, rotate, border draw, 3D depth, ripple, shimmer, split wipe), scroll-reveal animation, 3D flip card, text reveal with mask clip, image zoom on hover, background color crossfade, border draw animation, fade in/out, navigation menu hover, loading skeleton shimmer, modal open/close, page transitions (Next/Vue/Astro view-transition pattern), ripple effect on click, underline animation, animated number counter, 3D mousemove card tilt, glassmorphism hover, staggered IntersectionObserver list animation, cursor trail effect, magnetic button hover, split text reveal (GSAP-style), and animated progress bars. All GPU-accelerated via transform + opacity only (compositor-thread, no layout thrashing — INP-friendly), respect prefers-reduced-motion, and ship MIT-licensed with zero framework dependencies. 9 demos are 100% pure CSS; 13 use vanilla JavaScript for IntersectionObserver, mousemove, or click coordinates.","tags":"css transition css transitions css transition effects css transition examples css transition animation transition css css transition property css transition timing function css transition duration css transition delay css transition all css transition vs animation button hover transition css button hover button hover effect button transition effect button hover animation css scroll reveal scroll reveal animation scroll triggered animation intersection observer reveal css scroll animation fade in on scroll slide in on scroll css flip card flip card transition 3d flip card css css text reveal text reveal animation split text reveal text mask reveal image zoom hover image hover effect image zoom transition background color transition css background transition border animation transition css border animation animated border css fade in fade out css css fade transition navigation hover effect menu hover transition nav hover animation loading skeleton css skeleton loader animation skeleton shimmer effect modal open transition modal animation css dialog open animation page transition css page transition effect view transitions api ripple effect on click click ripple animation css underline animation underline hover effect animated underline number counter animation css counter animation animated counter card tilt 3d hover 3d card tilt mousemove tilt effect glassmorphism hover glass hover transition staggered list animation cascade list animation cursor trail effect custom cursor css magnetic button effect magnetic hover split text animation text split reveal progress bar animation animated progress bar css transition without javascript pure css transitions css transitions without library framer motion alternative aos.js alternative gsap alternative react spring alternative tailwind transition alternative css transition react css transition vue css transition astro css transition svelte gpu accelerated transition 60fps transition compositor thread animation css transition performance inp score animation core web vitals transition css transition prefers-reduced-motion css transition accessibility wcag 2.3.3 animation css transition examples 2026 css transition copy paste mit licensed css transition css transition template transition timing function ease cubic-bezier transition ease-out animation motion","category":"collection","href":"/motion/css-transition-designs/"},{"title":"14 CSS Typewriter Effect Designs","description":"14 hand-coded CSS typewriter effects with live demos — canonical pure-CSS steps() + ch cursor, multi-line stagger, infinite word-swap loop, neon terminal prompt, clip-path reveal mask, SVG stroke-dashoffset handwriting, gradient highlight sweep, variable-font weight morph, per-character split stagger, vanilla-JS character injection, Matrix-rain scramble decode, RGB-channel glitch-on-type, syntax-highlighted code-editor typewriter, and scroll-triggered word reveal. 9 pure CSS (no JavaScript) + 5 with a tiny vanilla JS snippet — no framework. Modern @property + steps() techniques, prefers-reduced-motion honoured, MIT licensed.","tags":"css typewriter effect typewriter effect css css typing effect typing animation css css text typing animation css typewriter animation typewriter css typewriter animation css css typing text typing text effect css css typewriter examples css typewriter copy paste free css typewriter css typewriter 2026 modern typewriter css css typewriter no javascript pure css typewriter typewriter without javascript css only typewriter no js typewriter effect css steps() typewriter css steps function animation steps timing function ch unit typewriter ch character width css css width animation typewriter blinking cursor css css blinking cursor animation terminal cursor css text cursor blink css css caret blink css typewriter loop css text loop animation infinite typewriter css typewriter cycle css word swap animation word change animation css css text replace animation rotating text css css text rotator multi-line typewriter css multiline typing animation stagger text typing neon terminal css css terminal prompt command line css terminal text css css console output clip-path text reveal clip-path typewriter css clip-path text animation mask reveal text css svg stroke-dashoffset text svg handwriting animation draw text svg css svg text path animation gradient highlight typewriter @property gradient highlight gradient sweep text variable font weight animation variable font wght axis font-variation-settings animation css variable font morph font weight transition split char stagger per character animation letter-by-letter animation css splittext alternative split letters animation javascript typewriter vanilla js typewriter typewriter js no library character injection js setinterval typewriter matrix rain text scramble text effect matrix decode animation text scramble js decode effect text glitch typewriter css rgb glitch text chromatic aberration typing glitch on type effect css glitch text code editor typewriter typing code animation syntax highlighted typewriter vs code typing animation ide typewriter effect scroll triggered text scroll typewriter intersection observer typewriter scroll-driven typewriter type on scroll tailwind typewriter tailwind typewriter effect tailwind typing animation tailwindcss typewriter css react typewriter react typing animation vue typewriter svelte typewriter next.js typewriter astro typewriter react-typewriter-effect alternative typewriter-effect npm alternative typed.js alternative typeit.js alternative css typewriter accessibility wcag typewriter accessible typewriter animation aria-live typewriter screen reader typewriter typewriter prefers-reduced-motion typewriter motion sensitivity vestibular safe typewriter typewriter accessibility a11y typewriter hero headline typewriter landing page typewriter portfolio site typewriter intro animation developer portfolio typewriter typewriter cumulative layout shift typewriter cls fix typewriter performance css typewriter chrome safari firefox typewriter browser support background-clip typewriter css text animation effects text reveal animation kinetic typography css css-only no javascript mit licensed motion effects","category":"collection","href":"/motion/css-typewriter-effect/"}]}