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

  Popup with

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.