23+ CSS Blur Effects

Explore our hand-picked collection of top 23+ CSS blur effect code snippets, improve visual appeal and create engaging web experiences that captivate users.

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