Collection of free CSS filter code examples from Codepen and other resources

Blurred Video Effect with CSS filter

Organic Onboarding

CSS & JS content slider with blended gradient background.

CSS Filter Cards

FeTurbulence, feColorMatrix, feDisplacementMap

Concept img Loader Using clip-path + filter

Continuing with clip-path experiments, here's the img loader version that unblurs and colors an img to show loading progress.

Gooey Button Hover Effect with SVG filters & CSS

Uses the "gooey" SVG filter on top of a button element, and pseudo-elements with hover transitions for "bubbles".

Motion Blur Effect Using SVG filters

This is an experiment that simulates a motion blur effect every time a slide is switched. It takes advantage of SVG Gaussian Blur filter and some CSS keyframes animation. Although the effect does not require any Javascript to properly work, in this example Javascript is only used for the slider functionality.

Duotone Calendar

Duotone image with SVG filter.

Frosted Glass Card Overlay

Frosted glass effect using CSS3 filter property. The card's title and description slide up on hover, blurring the card's background behind them.

Spotify Colorizer Effects Using CSS Blend Modes

Use pure CSS to combine mix-blend-mode and filter to achieve Spotify-style "colorizer" effects.

Simple CSS Image Filters

Animated SVG Turbulence Filter

Simple Parallax Header with Blur

Animated SVG Filter FX

Frosted Glass Effect Using Filter Effects

Use a filter to blur an image for the frosted glass effect.

Transitioned CSS Filter Card

Rollover CSS Blur Filter Image Gallery

Utilizing CSS transitions & transforms and the CSS blur filter.

CSS-Filter (Blur) on Image-Caption

Two variations of hover effects on image, with the CSS-Filter (blur) on (the :before pseudo element of) an image-caption.