Hello people, my name is Ferdy and in this video I will show you how you can create a glossy-looking, blurry background area on your WordPress website using CSS. I’m going to show you how to apply this using Elementor, the Divi theme, and the free Blocksy theme. You can also apply this to your header, and I’ll demonstrate how to do that. So let’s get started.

The first thing I will do is go to css.gloss, hit enter, and here we can configure the look we have in mind. So it’s really cool, as you see there’s text and then over that is this morph-looking area. We can configure it, making it lighter or less transparent, more blurry, less blurry. You can change the color, and you can also have a dark look, and then we can have an outline. I want to decrease the outline to nothing; I don’t want to use that. I want to start with a light area, so white like this. If I’m happy with the result, I can copy the CSS to my clipboard.

Now I go to Elementor to one of the elements. I use Elementor Pro over here, but I will show you how we can do this using the free version of Elementor. First, let’s start with the Pro version. So I can grab this area, for instance, I added a page with Elementor. I scroll down and I go to this container. I want to go to the style and get rid of the background. So I click on the color and I say clear. Then I go to advanced. Here at layout, I say CSS classes. I call this one blurry. Okay, it’s called blurry, this container. Now I scroll down to the custom CSS and I paste this whole area.

And something weird happens, so I say command Z and then I go again to the container. Advanced, I have this now and then, it’s a glitch. I go to custom CSS, I click on the one or on this area, paste it, now it’s working. Then I say point blurry opening parentheses and here below the closing parentheses and now if I publish it and I click on the eye I can see the result. I don’t see that well because the background is static so I will go to YouTube search for Cape Town footage. Yes, right mouse click, copy the link address. In my opinion, Cape Town is one of the most beautiful places in the world. I go to the container, to the style, and I choose for a video background. Paste the link over here. So there it goes, and now you see the result. So let me click on publish. I scroll down. Look at this. Here it is sharp. But here it is blurry. So there’s a difference over here.

Now we can adjust this because I don’t like the way it’s looking right now. I can make the text light or I go with the dark look. I can do that over here, make it dark and then play around with the setting and copy it or I can go directly to the CSS area and play around with that. So I know 3 times 255 is 3 times the color maximum of red, green, and blue. So if I would say 0, 0, and 0, then I know it’s black. Then I can play around with the transparency. Right now it’s showing 29% of the opacity so if I would say 1 then it shows everything. If I say 0.50 it shows 50% so let’s say 70 that way you make it darker and it looks like that. And then if you want to adjust the radius, the border radius, you go to the border radius and I like to work with 20 pixels. And there’s the box shadow, you almost do not see it, but you can play around with that. And then the blurriness, right now it’s 5.7. If I say 2.7, it becomes less blurry. See, there’s not a big difference, but if I would say 22.7 it’s really blurry. So with all these settings you can play around until you’re satisfied with whatever you have in mind.

And now let me show you how you can apply this to the header. Well, I’m making a tutorial. You need to watch it if you want to apply what I’m doing over here. If you search for Elementor Pro header, a new one will be uploaded really soon. If you watch this one, I will show you how to create something like this. Let me show you incognito. If I scroll down, then this header appears, which is a different header than this transparent one. So maybe I want to give this header the same look, the glossy look. Well, let me show you how we can do that. I want to go for a light version, make it a bit blurry, like that. I copied the whole area from background on, copy. Then I go to my header in Elementor Pro, so I click on the header, then I go to the main header sticky, and go to advanced, custom CSS. So over here I have my sticky header in Elementor. So here below sticky header Elementor, hit enter, and I paste this. Now if I scroll down, this appears but it looks weird because I have to go to the style and get rid of the background. Otherwise, the background is interfering with our style. So this is what I have in mind. Now you see the background is blurry. The only thing is it has a border radius. I don’t want that. So I go to the advanced area, to the CSS code and I get rid of the border radius. This whole line, select it, get rid of it, publish.

Again, I want to go to the incognito window because then I’m not logged in and then I see the whole header. So something like this, this is what you can create and you see here I am blurry. I wonder if these are the right colors, the dark ones. So again what I also can do, it’s my website I can do whatever I want. I can say you know what that color should be dark, dark and dark. Then I go to the, let me see, I click over here. If you don’t see this, command I, control I or click over here, go to the structure. I go to the image, I replace it with the light logo. I go to the WordPress menu, I go to the style, and I change the text to white text, and then I go to the button and I leave it as it is. So I click on publish. Open in incognito window, and now I like it a lot. Again play around with the settings if you prefer to have one of the colors of your website in the background. I go to mine, site settings, global colors. I go for the secondary color, copy it and I go to the gloss, morph effect and I paste it and let me see red, green, blue okay I make it a bit darker and of course less transparent copy this area I go to my website let me see where was I? closest I go to my header to the main header, advanced custom CSS

, and I need to replace from this moment on, paste it, get rid of the border radius. So now I have a dark background in the color of my website, so I open this in incognito window. I like it. It maintains the style. This is blurry, this is blurry, this is blurry over another blurry area. So that’s how you can do that.

And then there’s also the free version of the Blocksy theme, for instance. Inspect, I need to find the container for the whole width. Maybe this, come on, C, go to the customizer. I need to find the area of the CSS class where I can apply our effect to. I’m not a CSS guru, so I’m just playing around, trying things. Background, hashtag 333. Yes there it is. So I found it. I copy this area over here, paste it, I get rid of the border radius and now it’s showing us the background over here, through it and it’s blurry. I hover over here, that doesn’t look good so what I will do, design, transparency when I hover over it, it should be orange. I want to show you one more example using the Divi Builder.

So I go to the website divi5.com. I enable the visual builder. I go to the same place as with Elementor. Oh, that’s not, that’s a different website. So let me go to the column. So I go over here, column two. Background, if I was making a certain color, it would look like that. Okay, I know we are at the right place. So I go to Advanced and I go to CSID and I say, or class, and I say Blurry and then here at Custom CSS I paste the code and I say. blurry, opening parentheses, and here the closing one. Great and then with other things here at design spacing I can increase it. Let’s say 20, 20, 20 and 20. Let me add a video background real quick and there you go. I can see through it but it’s blurry. Blurry. I exit the visual builder. I scroll down there, you see it. You can’t see the images are blurry over here. So also in this case it is working. So that’s how you can create the blurry background-ish look in WordPress using Elementor, Divi, and Blocksy Theme.

Thank you for watching this tutorial. I hope you like it. Feel free to subscribe for more upcoming tutorials and then I hope you have a great day. Bye bye.

Learn how to apply the Glassmorphism effect using CSS in WordPress, Elementor, Divi, and the Blocksy theme.

00:00 Intro
00:19 Elementor (and Customs CSS)
4:44 Elementor Pro Header
08:57 The Blocksy Theme
10:02 The Divi Theme

#glassmorphism #wordpress #wordpresstutorial