I've added this .blur class to body tag to blur whole website.
CSS
.blur {
filter: blur(1px);
filter: url("blur.svg#gaussian_blur");
-webkit-filter: blur(1px);
-o-filter: blur(2px);
}
HTML
<body class="blur">
...
<div class="mustBeClear"></div> <!-- somewhere in the page-->
...
</body>
How to keep .mustBeClear class not blured.
I've tried
.mustBeClear{
filter: none;
-webkit-filter: none;
-o-filter: none;
}
but, it does not work!
What you are trying to do is not possible. Because SVG filters get applied to an entire element at once, you cannot then selectively "undo" the filter for a single child element.
What I would recommend instead is to only blur the element that you want to be blurred, then you can use absolute positioning on another element on top that does not have the blur effect.
Here is a live example to illustrate what I'm talking about:
.container {
position: relative;
top: 50px;
left: 50px;
}
.blur {
filter: blur(5px);
-webkit-filter: blur(5px);
-o-filter: blur(5px);
}
#text {
position: absolute;
left: 50px;
top: 50px;
}
<div id="container">
<div class="blur">
<img src="http://i.imgur.com/5LGqY2p.jpg?1" />
</div>
<div id="text">Not Blurred Text</div>
</div>
Related
Is there a way to set the background of text blurry over an image? Like
h1 {
text-align: center;
background-color: <blurry>;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>The Last Will and Testament of Eric Jones</h1>
</body>
</html>
EDIT most of the solution online show how to blur the image. What I am seeking for is something to apply a blur filter just to the background of the text element. I don't know if you can set this inside h1 element or not.
In this example, I used an image as background for the blur effect to be more evident, but if you want to change the image by a color, simply replace the background-image attribute with background-color: # 000000;
Note that # 000000 is your desired color in hex, so you should override this value.
<body>
<div class="background">
</div>
<h1 class="text"> The Last Will and Testament of Eric Jones</h1>
</body>
CSS:
.background {
position: absolute;
left: 0;
right: 0;
z-index: 1;
display: block;
background-image: url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG');
width: 1200px;
height: 800px;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
.text {
position: relative;
z-index: 3;
}
Look at the example I made
Just add opacity
.element{
opacity : 0.1;
}
So, I'm developing a website based on CSS3. Here is a part of code which trying to make the background blur.
.blur {
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
}
I know that IE is not supported for blur filter. I search for article they said I have to use SVG to solve this problem. But somehow my website is using in a scenario that there is no internet which mean that I cant access any url when browsing it. Is there anyway to solve this problem without using SVG?
One way that I can think of is basically just duplicating the background container and changing the opacity and moving the image slightly to give yourself a blur. Another option you have would be to just create another image to put on your server, and just use photoshop to blur it and then switch the picture
img:first-child {
opacity: 1;
}
img {
opacity: 0.2;
position: absolute;
top: 0;
}
img:nth-child(2) {
left: 1px;
}
img:nth-child(3) {
left: 2px;
}
img:nth-child(4) {
left: 3px;
}
img:nth-child(5) {
left: 4px;
}
<img src="https://placekitten.com/600/600"/>
<img src="https://placekitten.com/600/600"/>
<img src="https://placekitten.com/600/600"/>
<img src="https://placekitten.com/600/600"/>
<img src="https://placekitten.com/600/600"/>
I am trying to do a css blurry glass effect with filters, but it's not working in the way it should.
The div has no opacity at all and it's not blurry.
Code(CSS):
#siteDesc
{
text-align: center;
background-color: #FFFFFF;
width: 1200px;
margin: 0 auto;
margin-top: 30px;
padding: 10px;
padding-bottom: 20px;
border-radius: 5px;
}
#siteDesc:after
{
opacity: 0.7;
filter: blur(1px);
-moz-filter: blur(1px);
-webkit-filter: blur(1px);
-o-filter: blur(1px);
}
Edit:
Link to jsfiddle: http://jsfiddle.net/qy1sar8h/
Updated for relevance Sep 2021
There is a backdrop-filter CSS property that can achieve the frosted glass look.
See https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter for full details.
It is part of CSS Filter Effects Module Level 2 and the syntax for a blur filter is as follows:
backdrop-filter: blur(10px);
The background of the element will be blurred, but not the content or descendent elements.
To create a frosted glass effect, combine this property with an RGBA background colour that gives the background some transparency, e.g.:
background-colour: Reba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
This feature is available in all major browsers except Firefox (available behind a flag from Firefox 70) and Internet Explorer.
The technique you attempted will blur the full contents of whatever element it is applied to, and not just the background as you intended.
The only technique I know involves faking the blur with positioned background images either using a pre-blurred image or taking advantage of the filter CSS property to blur the original. I don't use this technique because it's too easy for the images to be out of alignment and your trick no longer looks good.
The pseudo-element won't render without a content property and, in any case will not blur the associated parent div.
Applying a filter to the pseudo-element will only blur the content of the pseudo-element.
body {
background-color: #37E1E4;
}
#siteDesc {
text-align: center;
background-color: #FFFFFF;
margin: 0 auto;
margin-top: 30px;
padding: 10px;
padding-bottom: 20px;
border-radius: 5px;
}
#siteDesc:after {
content: 'SOME TEXT';
opacity: 0.7;
filter: blur(1px);
-moz-filter: blur(1px);
-webkit-filter: blur(1px);
-o-filter: blur(1px);
}
<div id="siteDesc">
<p>Hello, this is my fiddle.</p>
</div>
If you apply the blur to the div itself you get this: JSFiddle Demo
EDIT: It's not entirely clear how this is supposed to look but the only option I see for blurring the background is not to have background on div element itself but rather simulate a background with a pseudo-element.
body {
background-color: #37E1E4;
}
#siteDesc {
text-align: center;
width: 90%;
margin: 10px auto;
margin-top: 30px;
padding: 10px;
padding-bottom: 20px;
border-radius: 5px;
position: relative;
font-weight:bold;
}
#siteDesc:before {
content: '';
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
-webkit-filter: blur(1px);
filter: blur(1px);
background-color: rgba(255,255,255,0.7);
z-index:-1;
}
<div id="siteDesc">
<p>Hello, this is my fiddle.</p>
</div>
How can I apply a Gaussian blur using CSS to a DIV which contains text. Basically, what I want to achieve is to have the box with a gaussian blur but the text in a normal way. Can this be done? I don't know how, I've been trying but I just can't.
Example:
Like I have my div at opacity: 0.75 I would like my div to be transparent but with gaussian blur, since in the background I have a moving image, so I want the box to be blurred.
Apply following CSS to your block:
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
However, this property works only in modern browsers: compatibility table
Well I don't think you can achieve what you are looking for without some extra div or even better a pseudo-element. My suggestion would be:
div {
position:relative;
width: 10em;
height: 20em;
padding: 1em;
}
div::before {
content: '';
position:absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
background: url(http://upload.wikimedia.org/wikipedia/en/6/6c/Some_Girls.png);
z-index: -1;
}
Your question is not too clear though so I am not sure if this is what you are looking for...
Pen: http://codepen.io/marczking/pen/dqxwG
Anyway, I blurred a div via this code:
background: #FFFFFF;
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
filter: blur(2px);
opacity: 0.4;
But I want to put inside that blurred div some text, and the stays stays blur too after all, is there a way to cause the text itself only to not blur?
No, but:
You can position another element over the blurred element in that case.
See: z-index for this, along with the position: attribute.
Important: the element cannot be inside the blurred element and just have a higher z-index only. It needs to be outside it, positioned over the other one, and have a higher z-index than the blurred element.
Here is a very basic example, using position: absolute;:
http://jsfiddle.net/digitalextremist/ky3Ca/3/
Excerpt:
.unblurred {
position: absolute;
top: 5px;
left: 5px;
z-index: 9;
}
There are a lot of ways to do positioning. The above jsfiddle only shows one way to get you started.
You can position the text over the div using some other html element, check this fiddle:
http://jsfiddle.net/7PxzL/1/
HTML:
<div></div>
<span>This is the Text</span>
CSS:
div {
width:100px;
height:100px;
background: #cccccc;
z-index:-1px;
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
filter: blur(2px);
}
span {
position:absolute;
top:10px;
left:10px;
}