20+ CSS Blurred Background Examples

CSS Blurred Background – Are you looking for CSS Blurred Background Effect, If yes then in this post I am going to share hand-picked CSS Blurred Background Examples for you. You can use these CSS Blurred Background Effects in your next web based projects.

CSS Blurred Background

Following are the list of CSS Blurred Background.

Blurred Background CSS DEMO

 Blurred Background CSS

While waiting for the official property, the trick is to create blurred version of the background, and set the background property both of them (main body background and box that want to be blurred) to be cover sized and fixed.


Popup with “Blurred Background” DEMO

jQuery Mobile popup with blurred background.


Blurred Background DEMO

 Blurred Background

with SVG filters


Modal / blurred background DEMO

 Modal / blurred background

Responsive modal with blurred background (SVG filters for browser support.).


Blurred Background Generator DEMO

 Blurred Background Generator

Add flare to your web projects with the Apalis Blurred Background Generator. Generates a random set of colours and creates a blurred background with them. The generator also creates some plain javascript code that can be placed in your own web project.


Login page with blur background DEMO

 Login page with blur background


Zoom and Blur background Image DEMO

 Zoom and Blur background Image

Background zoom and blur feature using CSS jquery. In IE $([selector]).css(‘background-image’) returns a pixel value even if your css is in percent. To fix, use a fixed number instead of the ‘zoom’ variable in this example.


Pop-up with blurred background animation DEMO

 Pop-up with blurred background animation

Here’s a popup that appears while blurring out the body underneath. click the ‘X’ close on the popup and the blur transition back while the popup fades off.


blur background with menu test DEMO

 blur background with menu test

test for a friend.


Blurred Background DEMO

 Blurred Background

This works for both mobile and desktop. This won’t work in IE as CSS filters do not work in IE.


CSS Filter blurred popup background DEMO

 CSS Filter blurred popup background

CSS filter used to create blurred background for popup / popover / modal.


Blurred Backgrounds DEMO

 Blurred Backgrounds

Who knew it was so easy?


Blurred background modal window DEMO

 Blurred background modal window

Instead of the usual “make the background dark” modal window, I wanted to make one that added a blur to the page.


Filtered background with fallback for legibility DEMO

 Filtered background with fallback for legibility

See the explaining blog post: codepen.io/tigt/post/blurred-background-image-with-fallback


Blurred background video on box focus DEMO

 Blurred background video on box focus

Blurred background video on box focus and first drop down opened for UX


Blurred Background DEMO

 Blurred Background


Spotify iOS (draggable artist profile pages) WebKit only DEMO

 Spotify iOS (draggable artist profile pages) WebKit only

loving the new spotify update for iOS (hoping taht android will get a similar update :/) and love the artist profile pages.


Blurred background DEMO

 Blurred background


Blur Background Menu DEMO

 Blur Background Menu


Blurred background slider DEMO

 Blurred background slider

Using CSS webkit-blur together with a simple jQuery slider. Works pretty smooth with CSS hardware-acceleration, smoother with smaller images, only need 1000×400 (or whatever), the size for the background doesn’t matter because the pixels are blurred anyway.


Blur background using CSS filters DEMO

 Blur background using CSS filters


Last.fm recent track v 1.0 DEMO

 Last.fm recent track v 1.0

Making an API call to display the most recently listened track on my last.fm profile.


Pure css responsive tabs DEMO

 Pure css responsive tabs

Simple, clean and pure css responsive tabs. Update: I’ve added some simple effects for tab body transitions – checkout the commented parts of scss code.


Pure CSS Blurred Background Login Box. DEMO

 Pure CSS Blurred Background Login Box.

Frosted Glass effect over background image instead of video like the original from [Lokesh Suthar] Forked from Lokesh Suthar’s Pen Pure CSS Blurred Video Background Login Box..


I Hope you liked Hand-picked list of CSS Blurred Background, Don’t forget to Subscribe My Public Notebook for more useful Hand-picked HTML and CSS code examples, tutorials and articles.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.