23+ CSS Blur Effects

A hand-picked collection of the top HTML and CSS blur effects examples sourced from authentic platforms like CodePen and GitHub. These visually stunning CSS blur effects are mainly used in web development to apply a blur effect to specific elements on a webpage.

The blur effect particularly softens the appearance of the element; it creates a sense of depth and focuses attention on other elements.

Each blur effect is carefully chosen and aims to help a variety of people involved in web development, including web designers, front-end developers, and UX/UI designers. It improves the visual aesthetics and enhances the user experience and interactivity of a digital project.

Let’s check out our curated collection of the best 23+ CSS blur effects to improve visual appeal and create engaging web experiences that captivate users and effectively communicate information.

1. Rollover CSS Blur Filter Image Gallery

See the Pen <a href="https://codepen.io/sjmcpherson/pen/DqqwmW"> Rollover CSSS Blur Filter Image Gallery</a> by sjmcpherson (<a href="https://codepen.io/sjmcpherson">@sjmcpherson</a>) on <a href="https://codepen.io">CodePen</a>.

Author: sjmcpherson
Source: Code / Demo
Created on: MAY 03, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

2. CSS Filter Cards

See the Pen <a href="https://codepen.io/steveeeie/pen/NVWMEM"> CSS Filter Cards</a> by Steve Meredith (<a href="https://codepen.io/steveeeie">@steveeeie</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Steve Meredith
Source: Code / Demo
Created on: MAY 06, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

3. CSS3 Blur Filter Animation

See the Pen <a href="https://codepen.io/01miru/pen/njOvNB"> CSS3 blur filter animation</a> by Dorian Nowak (<a href="https://codepen.io/01miru">@01miru</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Dorian Nowak
Source: Code / Demo
Created on: SEPTEMBER 06, 2012
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

4. A Blurred Overlay

See the Pen <a href="https://codepen.io/glennreyes/pen/GppZZG"> A blurred overlay</a> by Glenn Reyes (<a href="https://codepen.io/glennreyes">@glennreyes</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Glenn Reyes
Source: Code / Demo
Created on: SEPTEMBER 10, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

5. Draggable Blur Mask Over Image

See the Pen <a href="https://codepen.io/marcruecker/pen/ezWMBL"> Draggable blur mask over image</a> by marcruecker (<a href="https://codepen.io/marcruecker">@marcruecker</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: marcruecker
Source: Code / Demo
Created on: JULY 01, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

6. Tilt-Shift Blur Effect

See the Pen <a href="https://codepen.io/wakana-k/pen/KKJgQjX"> Tilt-Shift Blur Effect</a> by Wakana Y.K. (<a href="https://codepen.io/wakana-k">@wakana-k</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Wakana Y.K.
Source: Code / Demo
Created on: NOVEMBER 3, 2023
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

7. frosted glass / blur effect

See the Pen <a href="https://codepen.io/BastianAndre/pen/bBrKqv"> frosted glass / blur effect</a> by Bastian Andre (<a href="https://codepen.io/BastianAndre">@BastianAndre</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Bastian Andre
Source: Code / Demo
Created on: NOVEMBER 27, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS), JavaScript

8. I ♥ Blur

See the Pen <a href="https://codepen.io/simurai/pen/nEgBrG"> I ♥ BLUR</a> by simurai (<a href="https://codepen.io/simurai">@simurai</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: simurai
Source: Code / Demo
Created on: APRIL 19, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

9. Frosted Glass Effect

See the Pen <a href="https://codepen.io/AmJustSam/pen/ModORY"> Frosted Glass Effect – Form</a> by Usama Tahir (<a href="https://codepen.io/AmJustSam">@AmJustSam</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Usama Tahir
Source: Code / Demo
Created on: JULY 18, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

10. Live CSS Blur

See the Pen <a href="https://codepen.io/aja9104/pen/ARJyJb"> Live CSS Blur</a> by aadamski91 (<a href="https://codepen.io/aja9104">@aja9104</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: aadamski91
Source: Code / Demo
Created on: OCTOBER 19, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

11. CSS Directional Motion Blur

See the Pen <a href="https://codepen.io/flyorboom/pen/jOELoqM"> CSS Directional Motion Blur</a> by XYZt (<a href="https://codepen.io/flyorboom">@flyorboom</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: XYZt
Source: Code / Demo
Created on: DECEMBER 30, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

12. Bokeh Pattern

See the Pen <a href="https://codepen.io/owlypixel/pen/bqBvRe"> Bokeh Pattern</a> by Owlypixel (<a href="https://codepen.io/owlypixel">@owlypixel</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Owlypixel
Source: Code / Demo
Created on: MARCH 08, 2017
Made with: HTML, CSS, JavaScript

13. CSS Variables with JS

See the Pen <a href="https://codepen.io/joshuaward/pen/xXGbxw"> #JavaScript30: Update CSS Variables w/ JS</a> by Joshua Ward (<a href="https://codepen.io/joshuaward">@joshuaward</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Joshua Ward
Source: Code / Demo
Created on: SEPTEMBER 15, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

14. CSS – Frosted Glass

See the Pen <a href="https://codepen.io/kylewetton/pen/bGbaazX"> CSS – Frosted Glass</a> by Kyle Wetton (<a href="https://codepen.io/kylewetton">@kylewetton</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kyle Wetton
Source: Code / Demo
Created on: SEPTEMBER 6, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

15. DYNAMIC INSIDE BLUR PURE CSS

See the Pen <a href="https://codepen.io/Kseso/pen/nJayvp"> DYNAMIC INSIDE BLUR PURE CSS</a> by Kseso (<a href="https://codepen.io/Kseso">@Kseso</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kseso
Source: Code / Demo
Created on: NOVEMBER 8, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

16. Blurred Video Effect with CSS Filter

See the Pen <a href="https://codepen.io/jh3y/pen/XWWYEPQ"> Blurred video effect w/ CSS filter 📹</a> by Jhey (<a href="https://codepen.io/jh3y">@jh3y</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: JHEY
Source: Code / Demo
Created on: NOVEMBER 9, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

17. Pop-up with blurred background animation

See the Pen <a href="https://codepen.io/jaeming/pen/XWyaMe"> Pop-up with blurred background animation</a> by Benjamin Dalton (<a href="https://codepen.io/jaeming">@jaeming</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Benjamin Dalton
Source: Code / Demo
Created on: SEPTEMBER 19, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

18. Blurred Background CSS

See the Pen <a href="https://codepen.io/ariona/pen/xxdOaM"> Blurred Background CSS</a> by Rian Ariona (<a href="https://codepen.io/ariona">@ariona</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Rian Ariona
Source: Code / Demo
Created on: JUNE 4, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

19. Intrinsic Ratio Blur

See the Pen <a href="https://codepen.io/pouretrebelle/pen/wBeqZL"> Intrinsic Ratio Blur</a> by Charlotte Dann (<a href="https://codepen.io/pouretrebelle">@pouretrebelle</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Charlotte Dann
Source: Code / Demo
Created on: JANUARY 24, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

20. Blurred Background

See the Pen <a href="https://codepen.io/ejsado/pen/oNzzrJ"> Blurred Background</a> by Eric Sadowski (<a href="https://codepen.io/ejsado">@ejsado</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Eric Sadowski
Source: Code / Demo
Created on: MAY 1, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

21. Hover Effect Blur

See the Pen <a href="https://codepen.io/herve/pen/MWdRRd"> Hover effect blur</a> by Hervé (<a href="https://codepen.io/herve">@herve</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Hervé
Source: Code / Demo
Created on: OCTOBER 24, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

22. Blur Buttons

See the Pen <a href="https://codepen.io/caesura/pen/RrWQKX"> Blur Buttons</a> by Natalie Frecka (<a href="https://codepen.io/caesura">@caesura</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Natalie Frecka
Source: Code / Demo
Created on: DECEMBER 13, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

23. Shifting Depth of Field

See the Pen <a href="https://codepen.io/Trinca/pen/RRjybz"> Shifting Depth of Field</a> by Thomas Trinca (<a href="https://codepen.io/Trinca">@Trinca</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Thomas Trinca
Source: Code / Demo
Created on: JULY 13, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

24. Animated CSS Filter Blur

See the Pen <a href="https://codepen.io/ykob/pen/MWrdKPw"> Animated CSS filter blur</a> by yoichi kobayashi (<a href="https://codepen.io/ykob">@ykob</a>) on <a href="https://codepen.io">CodePen</a>. Author: yoichi kobayashi
Source: Code / Demo
Created on: APRIL 24, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS