{"apiVersion":"1","count":68,"docs":"https://cssimagelab.com/llms-image-fx.txt","effects":[{"id":"soft-zoom","slug":"soft-zoom","name":"Soft Zoom","category":"hover","categoryLabel":"Hover","description":"A restrained scale-in on hover — the calm default for portfolios and cards.","useCases":["portfolio","ecommerce","editorial","blog"],"tags":["hover","no-javascript","mobile-safe","reduced-motion","react-ready","zoom"],"badges":["No JS","Mobile-safe","Reduced-motion","React-ready"],"interaction":"hover","browserSupport":"modern","verified":true,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":false,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":true,"reducedMotionIncluded":true,"touchFallback":true},"url":"https://cssimagelab.com/effects/soft-zoom","apiUrl":"https://cssimagelab.com/api/effects/soft-zoom"},{"id":"slow-pan","slug":"slow-pan","name":"Slow Pan","category":"hover","categoryLabel":"Hover","description":"A slow cinematic drift across the image on hover.","useCases":["hero","editorial","travel"],"tags":["hover","no-javascript","reduced-motion","mobile-fallback","pan","cinematic"],"badges":["No JS","Reduced-motion","Mobile fallback"],"interaction":"hover","browserSupport":"modern","verified":true,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":false,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":true,"reducedMotionIncluded":true,"touchFallback":true},"url":"https://cssimagelab.com/effects/slow-pan","apiUrl":"https://cssimagelab.com/api/effects/slow-pan"},{"id":"depth-lift","slug":"depth-lift","name":"Depth Lift","category":"hover","categoryLabel":"Hover","description":"The card rises with a soft shadow — tactile without being loud.","useCases":["ecommerce","case-study","saas","portfolio"],"tags":["hover","no-javascript","mobile-safe","react-ready","shadow","lift"],"badges":["No JS","Mobile-safe","React-ready"],"interaction":"hover","browserSupport":"modern","verified":true,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":false,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":true,"reducedMotionIncluded":true,"touchFallback":true},"url":"https://cssimagelab.com/effects/depth-lift","apiUrl":"https://cssimagelab.com/api/effects/depth-lift"},{"id":"duotone-ink","slug":"duotone-ink","name":"Duotone Ink","category":"filter","categoryLabel":"Filter","description":"Two-tone ink treatment that unifies mixed photography.","useCases":["gallery","editorial","branding"],"tags":["filter","no-javascript","static","mobile-safe","duotone","blend-mode"],"badges":["No JS","Static","Mobile-safe"],"interaction":"always-on","browserSupport":"modern","verified":true,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":true,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":false,"reducedMotionIncluded":false,"touchFallback":true},"url":"https://cssimagelab.com/effects/duotone-ink","apiUrl":"https://cssimagelab.com/api/effects/duotone-ink"},{"id":"warm-editorial","slug":"warm-editorial","name":"Warm Editorial","category":"filter","categoryLabel":"Filter","description":"A bright, low-contrast warm magazine grade.","useCases":["lifestyle","travel","food"],"tags":["filter","no-javascript","static","mobile-safe","warm","grade"],"badges":["No JS","Static","Mobile-safe"],"interaction":"always-on","browserSupport":"modern","verified":true,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":false,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":false,"reducedMotionIncluded":false,"touchFallback":true},"url":"https://cssimagelab.com/effects/warm-editorial","apiUrl":"https://cssimagelab.com/api/effects/warm-editorial"},{"id":"crisp-monochrome","slug":"crisp-monochrome","name":"Crisp Monochrome","category":"filter","categoryLabel":"Filter","description":"Clean, high-contrast black and white.","useCases":["team","editorial","portfolio"],"tags":["filter","no-javascript","static","react-ready","monochrome","black-and-white"],"badges":["No JS","Static","React-ready"],"interaction":"always-on","browserSupport":"modern","verified":true,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":false,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":false,"reducedMotionIncluded":false,"touchFallback":true},"url":"https://cssimagelab.com/effects/crisp-monochrome","apiUrl":"https://cssimagelab.com/api/effects/crisp-monochrome"},{"id":"bottom-gradient-caption","slug":"bottom-gradient-caption","name":"Bottom Gradient Caption","category":"overlay","categoryLabel":"Overlay","description":"A readable caption anchored over a soft bottom gradient.","useCases":["ecommerce","editorial","lookbook","portfolio"],"tags":["overlay","no-javascript","always-readable","mobile-safe","caption","gradient"],"badges":["No JS","Always-readable","Mobile-safe"],"interaction":"always-on","browserSupport":"modern","verified":true,"hasCaption":true,"requires":{"wrapper":false,"pseudoElements":true,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":false,"reducedMotionIncluded":false,"touchFallback":true},"url":"https://cssimagelab.com/effects/bottom-gradient-caption","apiUrl":"https://cssimagelab.com/api/effects/bottom-gradient-caption"},{"id":"glass-caption","slug":"glass-caption","name":"Glass Caption","category":"overlay","categoryLabel":"Overlay","description":"A frosted glass caption bar that floats above the image.","useCases":["interior","editorial","gallery"],"tags":["overlay","no-javascript","enhanced-support","backdrop-filter","glass","caption"],"badges":["No JS","Enhanced support"],"interaction":"always-on","browserSupport":"enhanced","verified":true,"hasCaption":true,"requires":{"wrapper":false,"pseudoElements":false,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":false,"reducedMotionIncluded":false,"touchFallback":true},"url":"https://cssimagelab.com/effects/glass-caption","apiUrl":"https://cssimagelab.com/api/effects/glass-caption"},{"id":"offset-frame","slug":"offset-frame","name":"Offset Frame","category":"frame","categoryLabel":"Frame","description":"An outlined frame offset behind the image that snaps in on hover.","useCases":["portfolio","gallery","editorial"],"tags":["frame","no-javascript","reduced-motion","wrapper-required","border","offset"],"badges":["No JS","Reduced-motion","Wrapper req."],"interaction":"hover","browserSupport":"modern","verified":true,"hasCaption":false,"requires":{"wrapper":true,"pseudoElements":true,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":true,"reducedMotionIncluded":true,"touchFallback":true},"url":"https://cssimagelab.com/effects/offset-frame","apiUrl":"https://cssimagelab.com/api/effects/offset-frame"},{"id":"polaroid-lift","slug":"polaroid-lift","name":"Polaroid Lift","category":"frame","categoryLabel":"Frame","description":"A tilted print that straightens as you hover.","useCases":["portfolio","gallery","personal"],"tags":["frame","no-javascript","reduced-motion","mobile-safe","polaroid","tilt"],"badges":["No JS","Reduced-motion","Mobile-safe","Wrapper req."],"interaction":"hover","browserSupport":"modern","verified":true,"hasCaption":true,"requires":{"wrapper":true,"pseudoElements":false,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":true,"reducedMotionIncluded":true,"touchFallback":true},"url":"https://cssimagelab.com/effects/polaroid-lift","apiUrl":"https://cssimagelab.com/api/effects/polaroid-lift"},{"id":"circle-reveal","slug":"circle-reveal","name":"Circle Reveal","category":"mask","categoryLabel":"Mask","description":"The image opens through an expanding circular reveal.","useCases":["gallery","feature","portfolio"],"tags":["mask","no-javascript","reduced-motion","enhanced-support","clip-path","reveal"],"badges":["No JS","Reduced-motion","Enhanced support"],"interaction":"hover","browserSupport":"enhanced","verified":true,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":true,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":true,"reducedMotionIncluded":true,"touchFallback":true},"url":"https://cssimagelab.com/effects/circle-reveal","apiUrl":"https://cssimagelab.com/api/effects/circle-reveal"},{"id":"diagonal-wipe","slug":"diagonal-wipe","name":"Diagonal Wipe","category":"mask","categoryLabel":"Mask","description":"A panel slides off on a diagonal to reveal the image.","useCases":["gallery","feature","editorial"],"tags":["mask","no-javascript","reduced-motion","enhanced-support","wipe","reveal"],"badges":["No JS","Reduced-motion","Enhanced support"],"interaction":"hover","browserSupport":"enhanced","verified":true,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":true,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":true,"reducedMotionIncluded":true,"touchFallback":true},"url":"https://cssimagelab.com/effects/diagonal-wipe","apiUrl":"https://cssimagelab.com/api/effects/diagonal-wipe"},{"id":"color-pop","slug":"color-pop","name":"Color Pop","category":"filter","categoryLabel":"Filter","description":"The image rests in grayscale and blooms back to saturated color on hover.","useCases":["portfolio","ecommerce","gallery","editorial"],"tags":["filter","no-javascript","mobile-safe","reduced-motion","react-ready","grayscale","color-pop"],"badges":["No JS","Mobile-safe","Reduced-motion","React-ready"],"interaction":"hover","browserSupport":"modern","verified":true,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":false,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":true,"reducedMotionIncluded":true,"touchFallback":true},"url":"https://cssimagelab.com/effects/color-pop","apiUrl":"https://cssimagelab.com/api/effects/color-pop"},{"id":"cinematic-grade","slug":"cinematic-grade","name":"Cinematic Grade","category":"filter","categoryLabel":"Filter","description":"A movie-style color grade with selectable looks and tunable contrast and saturation.","useCases":["film","hero","portfolio"],"tags":["filter","no-javascript","static","mobile-safe","cinematic","color-grade"],"badges":["No JS","Static","Mobile-safe"],"interaction":"always-on","browserSupport":"modern","verified":true,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":false,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":false,"reducedMotionIncluded":false,"touchFallback":true},"url":"https://cssimagelab.com/effects/cinematic-grade","apiUrl":"https://cssimagelab.com/api/effects/cinematic-grade"},{"id":"faded-film","slug":"faded-film","name":"Faded Film","category":"filter","categoryLabel":"Filter","description":"A washed-out film grade with lifted contrast, warm tones and a soft darkened vignette.","useCases":["editorial","portfolio","photography"],"tags":["filter","no-javascript","static","mobile-safe","faded","film","vintage"],"badges":["No JS","Static","Mobile-safe"],"interaction":"always-on","browserSupport":"modern","verified":true,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":true,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":false,"reducedMotionIncluded":false,"touchFallback":true},"url":"https://cssimagelab.com/effects/faded-film","apiUrl":"https://cssimagelab.com/api/effects/faded-film"},{"id":"vignette","slug":"vignette","name":"Vignette","category":"filter","categoryLabel":"Filter","description":"A soft radial darkening around the edges that draws the eye to the center.","useCases":["portfolio","editorial","hero"],"tags":["filter","no-javascript","static","mobile-safe","vignette","radial-gradient"],"badges":["No JS","Static","Mobile-safe"],"interaction":"always-on","browserSupport":"universal","verified":true,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":true,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":false,"reducedMotionIncluded":false,"touchFallback":true},"url":"https://cssimagelab.com/effects/vignette","apiUrl":"https://cssimagelab.com/api/effects/vignette"},{"id":"scanlines","slug":"scanlines","name":"Scanlines","category":"filter","categoryLabel":"Filter","description":"Thin horizontal lines overlay the image for a retro CRT-screen look.","useCases":["editorial","gallery","hero"],"tags":["filter","no-javascript","static","mobile-safe","scanlines","retro","crt"],"badges":["No JS","Static","Mobile-safe"],"interaction":"always-on","browserSupport":"universal","verified":true,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":true,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":false,"reducedMotionIncluded":false,"touchFallback":true},"url":"https://cssimagelab.com/effects/scanlines","apiUrl":"https://cssimagelab.com/api/effects/scanlines"},{"id":"duotone-map","slug":"duotone-map","name":"Duotone Map","category":"filter","categoryLabel":"Filter","description":"A true gradient-map duotone that remaps shadows and highlights to two colors via an SVG filter.","useCases":["editorial","branding","portfolio","hero"],"tags":["filter","no-javascript","svg","svg-filter","duotone","color-grade","enhanced-support"],"badges":["No JS","Enhanced support","Static","React-ready"],"interaction":"always-on","browserSupport":"enhanced","verified":true,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":false,"svg":true,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":false,"reducedMotionIncluded":false,"touchFallback":true},"url":"https://cssimagelab.com/effects/duotone-map","apiUrl":"https://cssimagelab.com/api/effects/duotone-map"},{"id":"posterize","slug":"posterize","name":"Posterize","category":"filter","categoryLabel":"Filter","description":"Collapses continuous tones into flat color bands for a silkscreen or comic-print look.","useCases":["editorial","poster","branding","hero"],"tags":["filter","no-javascript","svg","svg-filter","posterize","comic","enhanced-support"],"badges":["No JS","Enhanced support","Static","React-ready"],"interaction":"always-on","browserSupport":"enhanced","verified":true,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":false,"svg":true,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":false,"reducedMotionIncluded":false,"touchFallback":true},"url":"https://cssimagelab.com/effects/posterize","apiUrl":"https://cssimagelab.com/api/effects/posterize"},{"id":"film-grain","slug":"film-grain","name":"Film Grain","category":"filter","categoryLabel":"Filter","description":"Overlays fine monochrome photographic grain generated by an SVG fractal-noise filter.","useCases":["editorial","photography","hero","branding"],"tags":["filter","no-javascript","svg","svg-filter","grain","texture","enhanced-support"],"badges":["No JS","Enhanced support","Static","React-ready"],"interaction":"always-on","browserSupport":"enhanced","verified":true,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":false,"svg":true,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":false,"reducedMotionIncluded":false,"touchFallback":true},"url":"https://cssimagelab.com/effects/film-grain","apiUrl":"https://cssimagelab.com/api/effects/film-grain"},{"id":"tilt-shift","slug":"tilt-shift","name":"Tilt Shift","category":"filter","categoryLabel":"Filter","description":"A sharp focal band with softly blurred surroundings that turns the scene into a miniature diorama.","useCases":["hero","gallery","travel","architecture"],"tags":["filter","no-javascript","static","mobile-safe","react-ready","tilt-shift","miniature","blur","depth-of-field"],"badges":["No JS","Static","Mobile-safe","React-ready"],"interaction":"always-on","browserSupport":"modern","verified":true,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":true,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":true,"reducedMotionIncluded":false,"touchFallback":true},"url":"https://cssimagelab.com/effects/tilt-shift","apiUrl":"https://cssimagelab.com/api/effects/tilt-shift"},{"id":"halftone","slug":"halftone","name":"Halftone Print","category":"filter","categoryLabel":"Filter","description":"The photo re-screens into a newsprint dot pattern — dense in the shadows, airy in the highlights.","useCases":["editorial","poster","comic","hero"],"tags":["filter","no-javascript","static","mobile-safe","react-ready","halftone","print","newsprint","comic","retro"],"badges":["No JS","Static","Mobile-safe","React-ready"],"interaction":"always-on","browserSupport":"modern","verified":true,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":true,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":true,"reducedMotionIncluded":false,"touchFallback":true},"url":"https://cssimagelab.com/effects/halftone","apiUrl":"https://cssimagelab.com/api/effects/halftone"},{"id":"orton-glow","slug":"orton-glow","name":"Orton Glow","category":"filter","categoryLabel":"Filter","description":"A dreamy soft-focus bloom, as if a blurred, brightened copy of the photo were double-exposed on top.","useCases":["portrait","landscape","editorial","gallery"],"tags":["filter","no-javascript","static","mobile-safe","react-ready","orton","glow","soft-focus","dreamy"],"badges":["No JS","Static","Mobile-safe","React-ready"],"interaction":"always-on","browserSupport":"modern","verified":true,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":true,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":true,"reducedMotionIncluded":false,"touchFallback":true},"url":"https://cssimagelab.com/effects/orton-glow","apiUrl":"https://cssimagelab.com/api/effects/orton-glow"},{"id":"pencil-sketch","slug":"pencil-sketch","name":"Pencil Sketch","category":"filter","categoryLabel":"Filter","description":"Converts the photo into a graphite line drawing — edges become pencil strokes on a paper-white ground.","useCases":["editorial","portfolio","illustration","branding"],"tags":["filter","no-javascript","svg","svg-filter","sketch","pencil","charcoal","edge-detect","enhanced-support"],"badges":["No JS","Enhanced support","Static","React-ready"],"interaction":"always-on","browserSupport":"enhanced","verified":true,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":false,"svg":true,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":false,"reducedMotionIncluded":false,"touchFallback":true},"url":"https://cssimagelab.com/effects/pencil-sketch","apiUrl":"https://cssimagelab.com/api/effects/pencil-sketch"},{"id":"riso-print","slug":"riso-print","name":"Riso Print","category":"filter","categoryLabel":"Filter","description":"Two flat spot-color ink plates that don't quite register, with visible offset fringing — a Risograph misprint.","useCases":["editorial","branding","poster","portfolio"],"tags":["filter","no-javascript","svg","svg-filter","risograph","print","spot-color","misregistration","enhanced-support"],"badges":["No JS","Enhanced support","Static","React-ready"],"interaction":"always-on","browserSupport":"enhanced","verified":true,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":true,"svg":true,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":false,"reducedMotionIncluded":false,"touchFallback":true},"url":"https://cssimagelab.com/effects/riso-print","apiUrl":"https://cssimagelab.com/api/effects/riso-print"},{"id":"split-tone","slug":"split-tone","name":"Split Tone","category":"filter","categoryLabel":"Filter","description":"Teal shadows, cream highlights — a darkroom split-tone grade that keeps every detail of the photo.","useCases":["photography","editorial","portfolio","hero"],"tags":["filter","no-javascript","mobile-safe","static","react-ready","split-tone","color-grade","blend-mode","shadows","highlights"],"badges":["No JS","Mobile-safe","Static","React-ready"],"interaction":"always-on","browserSupport":"modern","verified":false,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":true,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":false,"reducedMotionIncluded":false,"touchFallback":true},"url":"https://cssimagelab.com/effects/split-tone","apiUrl":"https://cssimagelab.com/api/effects/split-tone"},{"id":"knockout-caption","slug":"knockout-caption","name":"Knockout Caption","category":"overlay","categoryLabel":"Overlay","description":"A bold uppercase caption that blends into the photo, inverting its color against whatever sits behind it.","useCases":["gallery","editorial","portfolio"],"tags":["overlay","no-javascript","blend-mode","knockout","caption","mobile-safe"],"badges":["No JS","Static","Mobile-safe"],"interaction":"always-on","browserSupport":"modern","verified":true,"hasCaption":true,"requires":{"wrapper":false,"pseudoElements":false,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":false,"reducedMotionIncluded":false,"touchFallback":true},"url":"https://cssimagelab.com/effects/knockout-caption","apiUrl":"https://cssimagelab.com/api/effects/knockout-caption"},{"id":"hover-scrim","slug":"hover-scrim","name":"Hover Scrim","category":"overlay","categoryLabel":"Overlay","description":"A frosted scrim caption slides up from the bottom on hover, blurring the image behind it.","useCases":["travel","editorial","portfolio","gallery"],"tags":["overlay","no-javascript","reduced-motion","enhanced-support","backdrop-filter","scrim","caption","hover"],"badges":["No JS","Mobile-safe","Reduced-motion","React-ready","Enhanced support"],"interaction":"hover","browserSupport":"enhanced","verified":true,"hasCaption":true,"requires":{"wrapper":false,"pseudoElements":false,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":true,"reducedMotionIncluded":true,"touchFallback":true},"url":"https://cssimagelab.com/effects/hover-scrim","apiUrl":"https://cssimagelab.com/api/effects/hover-scrim"},{"id":"lens-flare","slug":"lens-flare","name":"Light Leak","category":"overlay","categoryLabel":"Overlay","description":"A warm light-leak flare blooms across one corner of the photo.","useCases":["portfolio","editorial","hero","photography"],"tags":["overlay","no-javascript","light-leak","static","blend-mode","flare"],"badges":["No JS","Mobile-safe","Static","React-ready"],"interaction":"always-on","browserSupport":"modern","verified":true,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":true,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":false,"reducedMotionIncluded":false,"touchFallback":true},"url":"https://cssimagelab.com/effects/lens-flare","apiUrl":"https://cssimagelab.com/api/effects/lens-flare"},{"id":"god-rays","slug":"god-rays","name":"God Rays","category":"overlay","categoryLabel":"Overlay","description":"Crepuscular light shafts fan out from an off-frame point across the photo, like sun through clouds.","useCases":["hero","landscape","editorial","gallery"],"tags":["overlay","no-javascript","static","mobile-safe","react-ready","god-rays","light","crepuscular","sunbeam"],"badges":["No JS","Static","Mobile-safe","React-ready"],"interaction":"always-on","browserSupport":"modern","verified":true,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":true,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":false,"reducedMotionIncluded":false,"touchFallback":true},"url":"https://cssimagelab.com/effects/god-rays","apiUrl":"https://cssimagelab.com/api/effects/god-rays"},{"id":"starburst-flare","slug":"starburst-flare","name":"Starburst Flare","category":"overlay","categoryLabel":"Overlay","description":"A photogenic star-spike highlight blooms from a point on the photo, like sun glinting off glass.","useCases":["photography","hero","editorial","gallery"],"tags":["overlay","no-javascript","mobile-safe","static","react-ready","starburst","flare","sparkle","blend-mode","glint"],"badges":["No JS","Mobile-safe","Static","React-ready"],"interaction":"always-on","browserSupport":"modern","verified":false,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":true,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":false,"reducedMotionIncluded":false,"touchFallback":true},"url":"https://cssimagelab.com/effects/starburst-flare","apiUrl":"https://cssimagelab.com/api/effects/starburst-flare"},{"id":"viewfinder","slug":"viewfinder","name":"Viewfinder","category":"overlay","categoryLabel":"Overlay","description":"A camera-HUD overlay — corner brackets, thirds grid, crosshair and a REC dot — frames the photo like a viewfinder.","useCases":["photography","portfolio","hero","editorial"],"tags":["overlay","no-javascript","mobile-safe","static","react-ready","viewfinder","camera","hud","grid","crosshair"],"badges":["No JS","Mobile-safe","Static","React-ready"],"interaction":"always-on","browserSupport":"modern","verified":false,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":true,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":false,"reducedMotionIncluded":false,"touchFallback":true},"url":"https://cssimagelab.com/effects/viewfinder","apiUrl":"https://cssimagelab.com/api/effects/viewfinder"},{"id":"foil-sheen","slug":"foil-sheen","name":"Foil Sheen","category":"overlay","categoryLabel":"Overlay","description":"An iridescent pastel gradient lies over the photo and glides across it on hover, like tilting a holographic trading card.","useCases":["ecommerce","portfolio","hero","editorial"],"tags":["overlay","no-javascript","mobile-safe","reduced-motion","react-ready","foil","holographic","iridescent","sheen","blend-mode","hover"],"badges":["No JS","Mobile-safe","Reduced-motion","React-ready"],"interaction":"hover","browserSupport":"modern","verified":false,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":true,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":true,"reducedMotionIncluded":true,"touchFallback":true},"url":"https://cssimagelab.com/effects/foil-sheen","apiUrl":"https://cssimagelab.com/api/effects/foil-sheen"},{"id":"photo-fill-caption","slug":"photo-fill-caption","name":"Photo Fill Caption","category":"overlay","categoryLabel":"Overlay","description":"A poster-sized title cut from the photo itself sits on a matte band — the image becomes the typography.","useCases":["hero","editorial","portfolio","lookbook"],"tags":["overlay","no-javascript","mobile-safe","static","always-readable","caption","background-clip","photo-fill","typography","poster"],"badges":["No JS","Mobile-safe","Static","Always-readable"],"interaction":"always-on","browserSupport":"modern","verified":false,"hasCaption":true,"requires":{"wrapper":false,"pseudoElements":false,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":false,"reducedMotionIncluded":false,"touchFallback":true},"url":"https://cssimagelab.com/effects/photo-fill-caption","apiUrl":"https://cssimagelab.com/api/effects/photo-fill-caption"},{"id":"corner-draw","slug":"corner-draw","name":"Corner Draw","category":"frame","categoryLabel":"Frame","description":"Corner brackets that draw outward into a full outlined frame on hover.","useCases":["portfolio","gallery","editorial"],"tags":["frame","no-javascript","reduced-motion","border","corner","hover"],"badges":["No JS","Mobile-safe","Reduced-motion","React-ready"],"interaction":"hover","browserSupport":"universal","verified":true,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":true,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":true,"reducedMotionIncluded":true,"touchFallback":true},"url":"https://cssimagelab.com/effects/corner-draw","apiUrl":"https://cssimagelab.com/api/effects/corner-draw"},{"id":"museum-matte","slug":"museum-matte","name":"Museum Matte","category":"frame","categoryLabel":"Frame","description":"An inset archival mat with a soft beveled inner edge, framing the photo like a gallery print.","useCases":["gallery","portfolio","editorial"],"tags":["frame","no-javascript","mat","museum","bevel","gallery"],"badges":["No JS","Mobile-safe","Static"],"interaction":"always-on","browserSupport":"universal","verified":true,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":true,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":false,"reducedMotionIncluded":false,"touchFallback":true},"url":"https://cssimagelab.com/effects/museum-matte","apiUrl":"https://cssimagelab.com/api/effects/museum-matte"},{"id":"gradient-border","slug":"gradient-border","name":"Gradient Border","category":"frame","categoryLabel":"Frame","description":"A conic-gradient border that rotates continuously around the image.","useCases":["portfolio","hero","ecommerce"],"tags":["frame","no-javascript","reduced-motion","gradient","border","conic-gradient","wrapper-required"],"badges":["No JS","Reduced-motion","Enhanced support","Wrapper req."],"interaction":"always-on","browserSupport":"enhanced","verified":true,"hasCaption":false,"requires":{"wrapper":true,"pseudoElements":true,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":false,"reducedMotionIncluded":true,"touchFallback":true},"url":"https://cssimagelab.com/effects/gradient-border","apiUrl":"https://cssimagelab.com/api/effects/gradient-border"},{"id":"page-curl","slug":"page-curl","name":"Page Curl","category":"frame","categoryLabel":"Frame","description":"The bottom corner lifts and curls like a peeling print, deepening as you hover.","useCases":["portfolio","editorial","gallery"],"tags":["frame","no-javascript","reduced-motion","enhanced-support","clip-path","page-curl","fold","paper","peel","hover"],"badges":["No JS","Mobile-safe","Reduced-motion","Enhanced support"],"interaction":"hover","browserSupport":"enhanced","verified":true,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":true,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":true,"reducedMotionIncluded":true,"touchFallback":true},"url":"https://cssimagelab.com/effects/page-curl","apiUrl":"https://cssimagelab.com/api/effects/page-curl"},{"id":"torn-edge","slug":"torn-edge","name":"Torn Edge","category":"frame","categoryLabel":"Frame","description":"Hand-torn paper edges replace the straight crop for a deckled, scrapbook finish.","useCases":["editorial","portfolio","gallery","personal"],"tags":["frame","no-javascript","static","mobile-safe","torn","paper","deckle","scrapbook","mask"],"badges":["No JS","Mobile-safe","Static"],"interaction":"always-on","browserSupport":"modern","verified":true,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":false,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":true,"reducedMotionIncluded":false,"touchFallback":true},"url":"https://cssimagelab.com/effects/torn-edge","apiUrl":"https://cssimagelab.com/api/effects/torn-edge"},{"id":"film-strip","slug":"film-strip","name":"Film Strip","category":"frame","categoryLabel":"Frame","description":"Black film bands with perforated sprocket holes run along the top and bottom, like one frame of a 35mm negative.","useCases":["editorial","portfolio","gallery","personal"],"tags":["frame","no-javascript","static","mobile-safe","film","sprocket","negative","35mm","mask"],"badges":["No JS","Mobile-safe","Static"],"interaction":"always-on","browserSupport":"modern","verified":true,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":true,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":true,"reducedMotionIncluded":false,"touchFallback":true},"url":"https://cssimagelab.com/effects/film-strip","apiUrl":"https://cssimagelab.com/api/effects/film-strip"},{"id":"passe-partout","slug":"passe-partout","name":"Passe-Partout","category":"frame","categoryLabel":"Frame","description":"A gallery double-mat — an outer board plus a thin contrasting reveal line — the framer's French-matting trick.","useCases":["gallery","portfolio","print","editorial"],"tags":["frame","no-javascript","static","mobile-safe","react-ready","mat","passe-partout","gallery","double-mat"],"badges":["No JS","Static","Mobile-safe","React-ready"],"interaction":"always-on","browserSupport":"universal","verified":true,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":true,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":true,"reducedMotionIncluded":false,"touchFallback":true},"url":"https://cssimagelab.com/effects/passe-partout","apiUrl":"https://cssimagelab.com/api/effects/passe-partout"},{"id":"album-corners","slug":"album-corners","name":"Album Corners","category":"frame","categoryLabel":"Frame","description":"Four translucent paper corner-mounts hold the image like a print slotted into an old photo album.","useCases":["personal","portfolio","editorial","gallery"],"tags":["frame","no-javascript","static","mobile-safe","react-ready","album","corners","photo-mount","scrapbook"],"badges":["No JS","Static","Mobile-safe","React-ready"],"interaction":"always-on","browserSupport":"universal","verified":true,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":true,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":true,"reducedMotionIncluded":false,"touchFallback":true},"url":"https://cssimagelab.com/effects/album-corners","apiUrl":"https://cssimagelab.com/api/effects/album-corners"},{"id":"letterbox","slug":"letterbox","name":"Letterbox","category":"frame","categoryLabel":"Frame","description":"Cinema letterbox bars crop the frame, with a subtitle-styled caption resting in the lower matte.","useCases":["hero","editorial","film","portfolio"],"tags":["frame","no-javascript","always-readable","mobile-safe","static","letterbox","cinematic","bars","subtitle","caption"],"badges":["No JS","Always-readable","Mobile-safe","Static"],"interaction":"always-on","browserSupport":"modern","verified":false,"hasCaption":true,"requires":{"wrapper":false,"pseudoElements":true,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":false,"reducedMotionIncluded":false,"touchFallback":true},"url":"https://cssimagelab.com/effects/letterbox","apiUrl":"https://cssimagelab.com/api/effects/letterbox"},{"id":"blob-crop","slug":"blob-crop","name":"Blob Crop","category":"frame","categoryLabel":"Frame","description":"The photo sits in an organic blob crop that slowly morphs between shapes, like a living cell.","useCases":["portfolio","hero","editorial","gallery"],"tags":["frame","no-javascript","mobile-safe","reduced-motion","react-ready","border-radius","blob","organic","morph","crop"],"badges":["No JS","Mobile-safe","Reduced-motion","React-ready"],"interaction":"always-on","browserSupport":"modern","verified":false,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":false,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":false,"reducedMotionIncluded":true,"touchFallback":true},"url":"https://cssimagelab.com/effects/blob-crop","apiUrl":"https://cssimagelab.com/api/effects/blob-crop"},{"id":"iris-reveal","slug":"iris-reveal","name":"Iris Reveal","category":"mask","categoryLabel":"Mask","description":"A faceted iris veil spins open and collapses to the center to uncover the image.","useCases":["gallery","portfolio","hero"],"tags":["mask","no-javascript","reduced-motion","enhanced-support","clip-path","iris","shutter","reveal"],"badges":["No JS","Reduced-motion","Enhanced support"],"interaction":"hover","browserSupport":"enhanced","verified":true,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":true,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":true,"reducedMotionIncluded":true,"touchFallback":true},"url":"https://cssimagelab.com/effects/iris-reveal","apiUrl":"https://cssimagelab.com/api/effects/iris-reveal"},{"id":"barn-doors","slug":"barn-doors","name":"Barn Doors","category":"mask","categoryLabel":"Mask","description":"Two panels split apart like barn doors to reveal the image.","useCases":["gallery","portfolio","editorial"],"tags":["mask","no-javascript","reduced-motion","reveal","split","hover"],"badges":["No JS","Reduced-motion","Mobile-safe"],"interaction":"hover","browserSupport":"universal","verified":true,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":true,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":true,"reducedMotionIncluded":true,"touchFallback":true},"url":"https://cssimagelab.com/effects/barn-doors","apiUrl":"https://cssimagelab.com/api/effects/barn-doors"},{"id":"radar-sweep","slug":"radar-sweep","name":"Radar Sweep","category":"mask","categoryLabel":"Mask","description":"A sonar veil covers the photo, then a radar beam sweeps around the center to clear it on hover.","useCases":["gallery","portfolio","feature","hero"],"tags":["mask","no-javascript","reduced-motion","enhanced-support","conic-gradient","radar","sonar","sweep","reveal","hover"],"badges":["No JS","Reduced-motion","Enhanced support"],"interaction":"hover","browserSupport":"enhanced","verified":false,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":true,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":true,"reducedMotionIncluded":true,"touchFallback":true},"url":"https://cssimagelab.com/effects/radar-sweep","apiUrl":"https://cssimagelab.com/api/effects/radar-sweep"},{"id":"pixel-dissolve","slug":"pixel-dissolve","name":"Pixel Dissolve","category":"mask","categoryLabel":"Mask","description":"A solid veil covers the photo, then dissolves in a grid of growing holes on hover — every cell clearing at once.","useCases":["gallery","portfolio","feature","hero"],"tags":["mask","no-javascript","reduced-motion","enhanced-support","radial-gradient","pixel","dissolve","grid","reveal","hover"],"badges":["No JS","Reduced-motion","Enhanced support"],"interaction":"hover","browserSupport":"enhanced","verified":false,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":true,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":true,"reducedMotionIncluded":true,"touchFallback":true},"url":"https://cssimagelab.com/effects/pixel-dissolve","apiUrl":"https://cssimagelab.com/api/effects/pixel-dissolve"},{"id":"glare-sweep","slug":"glare-sweep","name":"Glare Sweep","category":"hover","categoryLabel":"Hover","description":"A soft diagonal streak of light glides across the image on hover, like a reflection catching glass.","useCases":["portfolio","ecommerce","hero","gallery"],"tags":["hover","no-javascript","mobile-safe","reduced-motion","react-ready","glare","shine"],"badges":["No JS","Mobile-safe","Reduced-motion","React-ready"],"interaction":"hover","browserSupport":"universal","verified":true,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":true,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":true,"reducedMotionIncluded":true,"touchFallback":true},"url":"https://cssimagelab.com/effects/glare-sweep","apiUrl":"https://cssimagelab.com/api/effects/glare-sweep"},{"id":"chromatic-fringe","slug":"chromatic-fringe","name":"Chromatic Fringe","category":"hover","categoryLabel":"Hover","description":"Red and cyan channels split apart at the edges, a subtle RGB fringe that widens on hover.","useCases":["portfolio","editorial","hero","gallery"],"tags":["hover","no-javascript","mobile-safe","reduced-motion","react-ready","chromatic-aberration","rgb-split"],"badges":["No JS","Mobile-safe","Reduced-motion","React-ready"],"interaction":"hover","browserSupport":"modern","verified":true,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":false,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":true,"reducedMotionIncluded":true,"touchFallback":true},"url":"https://cssimagelab.com/effects/chromatic-fringe","apiUrl":"https://cssimagelab.com/api/effects/chromatic-fringe"},{"id":"glitch","slug":"glitch","name":"Glitch","category":"hover","categoryLabel":"Hover","description":"On hover the image tears into offset horizontal slices with a channel-shifting hue flicker.","useCases":["portfolio","editorial","music","hero"],"tags":["hover","no-javascript","mobile-safe","reduced-motion","react-ready","glitch","clip-path"],"badges":["No JS","Mobile-safe","Reduced-motion","React-ready","Enhanced support"],"interaction":"hover","browserSupport":"enhanced","verified":true,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":false,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":true,"reducedMotionIncluded":true,"touchFallback":true},"url":"https://cssimagelab.com/effects/glitch","apiUrl":"https://cssimagelab.com/api/effects/glitch"},{"id":"rack-focus","slug":"rack-focus","name":"Rack Focus","category":"hover","categoryLabel":"Hover","description":"The photo rests softly out of focus and snaps sharp on hover, like a lens racking onto its subject.","useCases":["portfolio","ecommerce","gallery","editorial"],"tags":["hover","no-javascript","mobile-safe","reduced-motion","react-ready","focus","blur","defocus","lens"],"badges":["No JS","Mobile-safe","Reduced-motion","React-ready"],"interaction":"hover","browserSupport":"modern","verified":true,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":false,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":true,"reducedMotionIncluded":true,"touchFallback":true},"url":"https://cssimagelab.com/effects/rack-focus","apiUrl":"https://cssimagelab.com/api/effects/rack-focus"},{"id":"thermal-scan","slug":"thermal-scan","name":"Thermal Scan","category":"hover","categoryLabel":"Hover","description":"A false-color thermal view of the live pixels washes across the image on hover, like a night-vision scan.","useCases":["tech","product","real-estate","editorial"],"tags":["hover","no-javascript","mobile-safe","react-ready","thermal","infrared","false-color","backdrop-filter"],"badges":["No JS","Enhanced support","Mobile-safe","React-ready"],"interaction":"hover","browserSupport":"enhanced","verified":true,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":true,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":true,"reducedMotionIncluded":true,"touchFallback":true},"url":"https://cssimagelab.com/effects/thermal-scan","apiUrl":"https://cssimagelab.com/api/effects/thermal-scan"},{"id":"loupe","slug":"loupe","name":"Loupe","category":"hover","categoryLabel":"Hover","description":"A jeweler's magnifier rests over the image on hover, a circular lens showing a crisp zoomed view of one detail.","useCases":["ecommerce","product","gallery","editorial"],"tags":["hover","no-javascript","mobile-safe","reduced-motion","react-ready","loupe","magnifier","zoom","mask","detail"],"badges":["No JS","Mobile-safe","Reduced-motion","React-ready"],"interaction":"hover","browserSupport":"modern","verified":false,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":true,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":true,"reducedMotionIncluded":true,"touchFallback":true},"url":"https://cssimagelab.com/effects/loupe","apiUrl":"https://cssimagelab.com/api/effects/loupe"},{"id":"ken-burns","slug":"ken-burns","name":"Ken Burns","category":"motion","categoryLabel":"Motion","description":"The image slowly zooms and pans in a continuous documentary-style drift.","useCases":["hero","editorial","gallery"],"tags":["motion","no-javascript","mobile-safe","reduced-motion","react-ready","ken-burns","pan","zoom"],"badges":["No JS","Mobile-safe","Reduced-motion","React-ready"],"interaction":"always-on","browserSupport":"universal","verified":true,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":false,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":false,"reducedMotionIncluded":true,"touchFallback":true},"url":"https://cssimagelab.com/effects/ken-burns","apiUrl":"https://cssimagelab.com/api/effects/ken-burns"},{"id":"shine-loop","slug":"shine-loop","name":"Shine Loop","category":"motion","categoryLabel":"Motion","description":"A soft diagonal glint sweeps across the image on a gentle repeating loop.","useCases":["ecommerce","hero","product","gallery"],"tags":["motion","no-javascript","reduced-motion","shine","shimmer","highlight"],"badges":["No JS","Mobile-safe","Reduced-motion"],"interaction":"always-on","browserSupport":"modern","verified":true,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":true,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":false,"reducedMotionIncluded":true,"touchFallback":true},"url":"https://cssimagelab.com/effects/shine-loop","apiUrl":"https://cssimagelab.com/api/effects/shine-loop"},{"id":"slow-breath","slug":"slow-breath","name":"Slow Breath","category":"motion","categoryLabel":"Motion","description":"The photo inhales and exhales with a barely-there scale-and-brightness pulse, reading as alive rather than moving.","useCases":["hero","portfolio","editorial","gallery"],"tags":["motion","no-javascript","mobile-safe","reduced-motion","react-ready","pulse","breathe","ambient"],"badges":["No JS","Mobile-safe","Reduced-motion","React-ready"],"interaction":"always-on","browserSupport":"universal","verified":true,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":false,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":false,"reducedMotionIncluded":true,"touchFallback":true},"url":"https://cssimagelab.com/effects/slow-breath","apiUrl":"https://cssimagelab.com/api/effects/slow-breath"},{"id":"aurora-drift","slug":"aurora-drift","name":"Aurora Drift","category":"motion","categoryLabel":"Motion","description":"Soft blurred blobs of color slowly drift across the photo like aurora light — a living, painterly wash.","useCases":["hero","landing","editorial","gallery"],"tags":["motion","no-javascript","mobile-safe","reduced-motion","react-ready","aurora","gradient","ambient","glow"],"badges":["No JS","Mobile-safe","Reduced-motion","React-ready"],"interaction":"always-on","browserSupport":"modern","verified":true,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":true,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":false,"reducedMotionIncluded":true,"touchFallback":true},"url":"https://cssimagelab.com/effects/aurora-drift","apiUrl":"https://cssimagelab.com/api/effects/aurora-drift"},{"id":"heat-haze","slug":"heat-haze","name":"Heat Haze","category":"motion","categoryLabel":"Motion","description":"The lower third of the photo shimmers and rises like heat off summer asphalt.","useCases":["hero","travel","landscape","editorial"],"tags":["motion","no-javascript","svg","svg-filter","reduced-motion","react-ready","heat","haze","shimmer","displacement","enhanced-support"],"badges":["No JS","Reduced-motion","Enhanced support","React-ready"],"interaction":"always-on","browserSupport":"enhanced","verified":false,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":true,"svg":true,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":false,"reducedMotionIncluded":true,"touchFallback":true},"url":"https://cssimagelab.com/effects/heat-haze","apiUrl":"https://cssimagelab.com/api/effects/heat-haze"},{"id":"tilt-3d","slug":"tilt-3d","name":"3D Tilt","category":"3d","categoryLabel":"3D","description":"The image tips into perspective on hover, catching the light like a card held at an angle.","useCases":["portfolio","gallery","hero"],"tags":["3d","no-javascript","reduced-motion","tilt","perspective","hover"],"badges":["No JS","Mobile-safe","Reduced-motion","React-ready","Wrapper req."],"interaction":"hover","browserSupport":"universal","verified":true,"hasCaption":false,"requires":{"wrapper":true,"pseudoElements":false,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":true,"reducedMotionIncluded":true,"touchFallback":true},"url":"https://cssimagelab.com/effects/tilt-3d","apiUrl":"https://cssimagelab.com/api/effects/tilt-3d"},{"id":"flip-card","slug":"flip-card","name":"Flip Card","category":"3d","categoryLabel":"3D","description":"The image flips on its vertical axis to reveal a colored back panel.","useCases":["portfolio","case-study","gallery"],"tags":["3d","no-javascript","reduced-motion","mobile-safe","flip","backface"],"badges":["No JS","Reduced-motion","Mobile-safe","Wrapper req."],"interaction":"hover","browserSupport":"universal","verified":true,"hasCaption":true,"requires":{"wrapper":true,"pseudoElements":false,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":true,"reducedMotionIncluded":true,"touchFallback":true},"url":"https://cssimagelab.com/effects/flip-card","apiUrl":"https://cssimagelab.com/api/effects/flip-card"},{"id":"depth-diorama","slug":"depth-diorama","name":"Depth Diorama","category":"3d","categoryLabel":"3D","description":"The photo separates into a shadow-box of depth planes that part ways as the card tilts on hover.","useCases":["portfolio","gallery","hero","product"],"tags":["3d","no-javascript","mobile-safe","reduced-motion","react-ready","parallax","depth","diorama","hover"],"badges":["No JS","Mobile-safe","Reduced-motion","React-ready"],"interaction":"hover","browserSupport":"modern","verified":true,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":true,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":true,"reducedMotionIncluded":true,"touchFallback":true},"url":"https://cssimagelab.com/effects/depth-diorama","apiUrl":"https://cssimagelab.com/api/effects/depth-diorama"},{"id":"gallery-wrap","slug":"gallery-wrap","name":"Gallery Wrap","category":"3d","categoryLabel":"3D","description":"The photo turns in perspective on hover and a wrapped canvas edge appears at its side, like a print on a shelf.","useCases":["portfolio","gallery","print","hero"],"tags":["3d","no-javascript","mobile-safe","reduced-motion","react-ready","canvas","perspective","turn","hover"],"badges":["No JS","Mobile-safe","Reduced-motion","React-ready","Wrapper req."],"interaction":"hover","browserSupport":"modern","verified":true,"hasCaption":false,"requires":{"wrapper":true,"pseudoElements":true,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":true,"reducedMotionIncluded":true,"touchFallback":true},"url":"https://cssimagelab.com/effects/gallery-wrap","apiUrl":"https://cssimagelab.com/api/effects/gallery-wrap"},{"id":"pivot-swing","slug":"pivot-swing","name":"Pivot Swing","category":"3d","categoryLabel":"3D","description":"The photo swings toward you on a left-edge hinge like a hanging signboard, then settles.","useCases":["portfolio","gallery","hero","product"],"tags":["3d","no-javascript","mobile-safe","reduced-motion","react-ready","perspective","swing","hinge","signboard","hover"],"badges":["No JS","Mobile-safe","Reduced-motion","React-ready","Wrapper req."],"interaction":"hover","browserSupport":"modern","verified":false,"hasCaption":false,"requires":{"wrapper":true,"pseudoElements":false,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":true,"reducedMotionIncluded":true,"touchFallback":true},"url":"https://cssimagelab.com/effects/pivot-swing","apiUrl":"https://cssimagelab.com/api/effects/pivot-swing"},{"id":"scroll-develop","slug":"scroll-develop","name":"Scroll Develop","category":"scroll","categoryLabel":"Scroll","description":"The photo develops as it scrolls into view — blur and haze rinse away like a darkroom print.","useCases":["landing","portfolio","editorial","gallery"],"tags":["scroll","no-javascript","mobile-safe","reduced-motion","react-ready","scroll-driven","reveal","develop","entrance"],"badges":["No JS","Mobile-safe","Reduced-motion","React-ready"],"interaction":"always-on","browserSupport":"enhanced","verified":true,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":false,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":true,"reducedMotionIncluded":true,"touchFallback":true},"url":"https://cssimagelab.com/effects/scroll-develop","apiUrl":"https://cssimagelab.com/api/effects/scroll-develop"},{"id":"scroll-parallax","slug":"scroll-parallax","name":"Scroll Parallax","category":"scroll","categoryLabel":"Scroll","description":"The photo pans and deepens as the card transits the viewport, like a window opening onto a scene.","useCases":["landing","portfolio","editorial","gallery"],"tags":["scroll","no-javascript","mobile-safe","reduced-motion","react-ready","scroll-driven","parallax","pan"],"badges":["No JS","Mobile-safe","Reduced-motion","React-ready"],"interaction":"always-on","browserSupport":"enhanced","verified":true,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":false,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":true,"reducedMotionIncluded":true,"touchFallback":true},"url":"https://cssimagelab.com/effects/scroll-parallax","apiUrl":"https://cssimagelab.com/api/effects/scroll-parallax"},{"id":"horizon-settle","slug":"horizon-settle","name":"Horizon Settle","category":"scroll","categoryLabel":"Scroll","description":"The photo drifts in tilted in 3D and levels out as it crosses the viewport, like a print settling into a frame.","useCases":["landing","portfolio","editorial","gallery"],"tags":["scroll","no-javascript","mobile-safe","reduced-motion","react-ready","scroll-driven","3d","tilt","perspective"],"badges":["No JS","Mobile-safe","Reduced-motion","React-ready","Wrapper req."],"interaction":"always-on","browserSupport":"enhanced","verified":true,"hasCaption":false,"requires":{"wrapper":true,"pseudoElements":false,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":true,"reducedMotionIncluded":true,"touchFallback":true},"url":"https://cssimagelab.com/effects/horizon-settle","apiUrl":"https://cssimagelab.com/api/effects/horizon-settle"},{"id":"scroll-colorize","slug":"scroll-colorize","name":"Scroll Colorize","category":"scroll","categoryLabel":"Scroll","description":"A hard boundary sweeps down the photo as it scrolls, colorizing it from grayscale top-to-bottom like a scanner.","useCases":["editorial","portfolio","landing","gallery"],"tags":["scroll","no-javascript","mobile-safe","reduced-motion","react-ready","scroll-driven","colorize","grayscale","reveal"],"badges":["No JS","Mobile-safe","Reduced-motion","React-ready"],"interaction":"always-on","browserSupport":"enhanced","verified":true,"hasCaption":false,"requires":{"wrapper":false,"pseudoElements":true,"svg":false,"javascript":false},"accessibility":{"essentialContentOnHover":false,"keyboardFocusable":true,"reducedMotionIncluded":true,"touchFallback":true},"url":"https://cssimagelab.com/effects/scroll-colorize","apiUrl":"https://cssimagelab.com/api/effects/scroll-colorize"}]}