Hello,
I have a problem to create something likes this:
I tried to get it for create a standard gradient with transparent colors etc. and nothing. Div has have blurred content for a full height. I want to have Blur 0% → Blur 100%.
Thanks for all replies.
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Hey,@Mike_Zue
You can achieve a blurred background effect by adding the following CSS to your code:
&:after {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 1;
backdrop-filter: blur(20px);
mask: linear-gradient(transparent, black 60%);
transition: 1s;
}
If you want to apply the blur gradient to the entire page just Keep the position: fixed;, or if you want to apply this solution only to a particular div just replace position: fixed; with position: absolute; and ensure the parent div has position: relative; for proper positioning. Feel free to tweak the backdrop-filter and mask values to fit your design requirements.
Hope this solution helps you.
Can I add this code for embed code? That is not working.
@addweb You don’t understand me as well. I need an effect on the pic. Without colors etc. Fully transparent blurred gradient.
@Mike_Zue Can you please find below attachment.
This is what you’re trying to implement in your design, right? Or did I misunderstand? Let me know, and I’ll be happy to adjust it!
That’s right :) :) :)
@Mike_Zue By implementing above shared code you achive your desired output. Let me share you a full code.
HTML Code:
<div class="blur-bg">
<h1>Here is a blur gradient background demo</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
CSS Code:
.blur-bg {
position: relative;
}
.blur-bg::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 1;
backdrop-filter: blur(10px);
mask: linear-gradient(transparent, black 80%);
transition: 1s;
}
I hope above code clear all your doubts and help to achieve your desire output.
Thanks for your patient, I don’t know why that CSS is related to full-screen not to DIV. I think all things are done as well.
@Mike_Zue Can you please change the position: fixed; to position: absolute; will give the output you want. Also you can review the first reply to get proper understanding regaarding this.
Thank you