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

Author

  • Jhey

Made with

  • HTML (Pug) / CSS (Stylus)

About a code

Blurred Video Effect with CSS filter

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • @keyframers

Made with

  • HTML / CSS (SCSS) / JS

About a code

Organic Onboarding

CSS & JS content slider with blended gradient background.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Steve Meredith

Made with

  • HTML / CSS

About a code

CSS Filter Cards

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: FeTurbulence, feColorMatrix, feDisplacementMap

Author

  • yoksel

Made with

  • HTML / CSS (SCSS)

About a code

FeTurbulence, feColorMatrix, feDisplacementMap

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Jhey

Made with

  • HTML (Pug) / CSS (Stylus)

About a code

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Ines Montani

Made with

  • HTML / CSS

About a code

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".

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Dami├ín Muti

Made with

  • HTML / CSS (SCSS) / JS

About a code

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: slick.css, jquery.js, slick.js

Demo image: Duotone Calendar

Author

  • yumeeeei

Made with

  • HTML / CSS (Stylus) / JS

About a code

Duotone Calendar

Duotone image with SVG filter.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Trevor Eyre

Made with

  • HTML / CSS (SCSS)

About a code

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Vail Joy

Made with

  • HTML / CSS

About a code

Spotify Colorizer Effects Using CSS Blend Modes

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Vail Joy

Made with

  • HTML / CSS

About a code

Simple CSS Image Filters

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Sean Free

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

Animated SVG Turbulence Filter

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: tweenmax.js

Author

  • tsimenis

Made with

  • HTML / CSS (SCSS) / JS

About a code

Simple Parallax Header with Blur

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Mai El-Awini

Made with

  • HTML / CSS / JS

About a code

Animated SVG Filter FX

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • betravis

Made with

  • HTML / CSS / JS

About a code

Frosted Glass Effect Using Filter Effects

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Dudley Storey

Made with

  • HTML / CSS

About a code

Transitioned CSS Filter Card

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • sjmcpherson

Made with

  • HTML (Haml) / CSS (Less)

About a code

Rollover CSS Blur Filter Image Gallery

Utilizing CSS transitions & transforms and the CSS blur filter.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Bram de Haan

Made with

  • HTML / CSS / JS

About a code

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: zepto.js