Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Blur effect on a div element

Tags:

html

css

blur

Is it possible to add a gaussian blur on div element? If yes, how I can do this?

like image 458
bialasikk Avatar asked Aug 15 '12 20:08

bialasikk


People also ask

How do you blur something in CSS?

The first way of creating a blurred text is making your text transparent and applying shadow to it. The shadow will make the text appear blurred. Use a <div> with an id "blur". Then, set the color property to its “transparent” value and define the text-shadow property to give a shadow to the text.

How do you blur content behind an element?

backdrop-filter: blur(10px); It will blur area behind the element.

Which CSS attribute can be specified to apply a blur effect to an element?

The filter property defines visual effects (like blur and saturation) to an element (often <img>).

How do I blur part of an image in CSS?

You choose a suitable background-position for the outer div. Make inner div position:absolute . This is where the blur appears. Apply blur to the :before selector.


1 Answers

I think this is what you are looking for? If you are looking to add a blur effect to a div element, you can do this directly through CSS Filters-- See fiddle: http://jsfiddle.net/ayhj9vb0/

 div {   -webkit-filter: blur(5px);   -moz-filter: blur(5px);   -o-filter: blur(5px);   -ms-filter: blur(5px);   filter: blur(5px);   width: 100px;   height: 100px;   background-color: #ccc;  } 
like image 126
BenSlight Avatar answered Oct 05 '22 21:10

BenSlight