Elementor - Frosted Glass Effect Pane with some simple CSS Code

hey there's loads of videos out there about glass effects like where you almost have like a pain but it has that frosted look to it and there's loads of css codes and videos and tutorials like i just said out there but there's a really simple way you could apply it and we're going to do that to this page right now [Music] i'm going to do that effect onto this basically this column over here so i'm just going to click the column and we're going to go to advanced and custom css and we're just going to drop a bit of code in and you're probably going to be looking notes and going was that it so here's the code frosted backdrop filter blur 6 pixels webkit webkit backdrop filter blur six pixels as well you'll notice it's got it's referring to frosted so let's just go to our advanced and put the word frosted so as soon as we name the class frosted we now have the frosted effect can you see that there i've just changed it to be a parallax effect on the background but look can you see that look as we move up and down you get that frosty blurriness look focus on the face over here you can see it there let's just improve and make it so much more better let's go back over here go to our column go to our style and we're going to give this column a background color of i mean the traditional color should just go for white okay like that which is way way too strong and i would say you want to kind of just drop it down a bit and maybe go for something like that so what we're now getting is there we've got a transparency but you're also getting that effect now i am just going to do something here i'm just going to add in about 20 kind of like pixels padding all the way around for this area and i'm going to give this a bit of a border radius of about 15. uh we could also go for a bit of a box shadow as well if we so want a tiny one we won't go too mental on that so there we go we now have this kind of frosted glass effect with that simple bit of css code a bit of a transparency white background a bit of a border radius and a bit of a shadow effect there and it now should feel like it's slightly coming out at you almost an effect which is what the frosted glass effect is so good at let's just double check some other settings on here back to advanced you notice that it says 6 pixel but what happens if i do 60 and i think you can now see what's going on here yeah it's now totally totally blurred and what if i drop this down to b1 like so let's just do it over here as well not much of an effect right so you can mess around now with how much of an effect are you trying to create with that blur i think six works perfectly well but if you want to go for like 10 or even lower you can do that entirely up to you this code will be i'll put it back to six as well by the way because i think that's that's what i'll stick in the description over there okay please look have fun with that stick it in your column i mean look you can also if you i mean i would it wouldn't be so much of a good effect if you did the entire section it works much better when you do it like this if that makes sense what's what i'm saying but the frosted effect um be a column i think it's really really cool to do i hope you like subscribe share and follow and have fun

Channel: Web Squadron

Views: 349

Keywords: Imran, Siddiq, Imran Siddiq, WebSquadron, Website, Squadron, Elementor, Elementor Pro, Tips, Hints, Wordpress, Elementor 101, Elementor Course, Web, Web Design, How to build a website, Elementor - Frosted Glass Effect Pane with some simple CSS Code, Frosted Glass, Flass Effect, Elementor Glass Pane, Custom CSS, Glass CSS, Elementor CSS Custom, Column Glass Effect

Id: relVoFn0HGM

Length: 3min 18sec (198 seconds)

Published: Fri Dec 17 2021