18 CSS filter Examples

About a code

Blurred Video Effect with CSS filter

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

Responsive: no

Dependencies: -

About a code

Organic Onboarding

CSS & JS content slider with blended gradient background.

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

Responsive: yes

Dependencies: -

About a code

CSS Filter Cards

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

Responsive: yes

Dependencies: -

About a code

FeTurbulence, feColorMatrix, feDisplacementMap

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

Responsive: yes

Dependencies: -

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: -

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: -

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

About a code

Duotone Calendar

Duotone image with SVG filter.

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

Responsive: yes

Dependencies: jquery.js

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: -

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: -

About a code

Simple CSS Image Filters

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

Responsive: yes

Dependencies: -

About a code

Animated SVG Turbulence Filter

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

Responsive: no

Dependencies: tweenmax.js

About a code

Simple Parallax Header with Blur

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

Responsive: yes

Dependencies: jquery.js

About a code

Animated SVG Filter FX

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

Responsive: no

Dependencies: -

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: -

About a code

Transitioned CSS Filter Card

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

Responsive: yes

Dependencies: -

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: -

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