CSS Tips Part 4 #shorts

Key Takeaways

so here's a nice little css technique we can use to get this frosted glass effect you can see in the html page we've got some basic content a title p tags and an image of bill murray down at the bottom we've got a modal container and that's the thing that contains the frosted glass panel with some content inside it it doesn't matter what the content is it's the glass panel div that works the magic in the style sheet we've got some basic styles for all the page content and the model including the glass panel as well to position it on the page and in a browser it looks now like a bug standard modal pop-up to get the glass effect we're going to apply a semi-transparent white background using rgba and then also apply the backdrop filter property to give it a small blur this is what gives it the frosted effect i'm also going to give it a box shadow for the depth and a white border to finish off and in the browser now we can see that frosty glass panel effect awesome