404s can be minimal. Thank you, Apple. Clever. Thank you, GitHub. Or confusing, like MSN, which shows you a message that ... Nope, not enough time to even read the words. We'll build a 404 page in Webflow, and, of course, it exists to tell users the page they're requesting may be a broken link or a mistyped URL. It tells them that the page can't be found. We'll build out the structural elements of our 404 page. Then we'll style them to match our brand, and we'll even cover some custom code that'll give us a frosted or blurry glass effect.
Let's start with the structure, and we can access the page from our Pages panel. We can go down to 404. This is the default. We're going to make some structural changes to it. First off, let's delete this image. Before we do anything else, before we do any styling, let's add all the correct elements. So we're going to add a Div block. This is going to hold some other content on the page. This Div block we're going to call frosted glass, which we'll use later to create a frosted glass effect. Let's add some stuff inside. Command K. Let's do a text block. Inside this, we're going to write the numbers 404. Not too profound-looking. We'll fix that in a moment and make the text really, really large.
This text here is in a Div. That's okay. We're going to move it under 404 into the frosted glass again. Now our frosted glass contains a text block and some more text in the form of a Div block. The third thing we're going to add, command K, is a button. Now we have a button. So a big heading, Page Not Found. This is an H2. Let's make this an H1, since it'll be the primary heading on the page. We have a separate Div block. This Div block, we called frosted glass. It has three things inside a text block, which says 404, another piece of text. It's a Div block, but it could be any text, saying, "The page you are looking for doesn't exist or has been moved," and a button. We want this button to route us. We can say back to homepage, and when we do that, we can press the cog and have it take us back to our homepage.
That's our first part. Let's move onto the second part, which is styling. There's a lot of things we can do to this. There are some defaults. Utility page content by default has a width of 260. We might want something wider. We can eyeball it, or we can just remove that width altogether so it's sized by the content inside. Let's change Page Not Found. Let's start here first off, let's do Page not found in sentence case, and we can choose. We have Enter here. Let's choose a 400 weight. Something to note, this is the current lighter variant, but we could select our utility page rep. We're affecting both utility pages. This will affect the 404 page and the password page.
Let's try a darker background color here. So let's set this to a dark color. In fact, to be precise, let's do 17, 17, 18, and let's set our text color to something lighter. Let's do white. Let's lower the opacity a little bit and then bring it back up a little bit. That looks pretty good. Let's select our frosted glass, and for now, we're going to add white. Then we'll set a very transparent look. We'll add some padding to add some space on all sides. Let's do 30 pixels on all sides. We'll set a maximum width on this frosted glass. Let's set a maximum width of let's say 320 pixels. For our 404, let's increase that size. In fact, let's first choose DM Serif Display. Set our line height to unit list. That's 1-return, and let's increase our font size to something very large.
Now, when styling something like this, this might not have been the best setup for us. In fact, we could instead set frosted glass. We could remove that maximum width and instead use the maximum width on our Div block here. In fact, let's name this 404 details, and let's set a maximum width here of 320. You'll notice it's pulled over to the left. We could select frosted glass and just make sure to set it to flex box. Then we can vertically align everything to the center. It looks a lot better. Now it will be sized based on whatever's taking up more space. So as we size our topography, everything works as it should, and we'll land on 172. That looks pretty good for now.
Let's rename this text block 404. That's the 404. Let's add a little margin at the bottom, push it off the bottom to space. Maybe 30 pixels. Let's dial our homepage button and set the background color to black. It's a block element by default, but we can set its width to 100%, and we can even add a divider. First let's call this Utility button, and let's add a divider between the 404 details and the utility button. Let's press command K, Div block, and we can set its width by default. We can send its width to 100%. So now it's taking up that width. Let's set its height to one pixel, and let's add some margin, just holding down Option or Alt to add margin on the top and bottom. Let's do 30 pixels on the top and bottom.
So our divider right now is transparent. So if we press Escape, it's completely gone, except it isn't. We can click Div block. We can call this Horizontal divider, and we can set its background color to a lighter color or a darker color. I can drop the opacity a little bit. Let's do 80%, and we'll press Escape. Let's also add some space between the heading, which is called Heading 2, but let's call it the utility heading, and we'll add some margin underneath that. Let's do ... While we're in the habit of it, let's do 30 pixels. 38 may be a little intense here. Let's drop that to 32, and we'll set the line height to unitless.
Now, it might be a little wide. The 404 details at 320 might be wide. Let's reduce that. Let's say the maximum width is 260. Let's put something behind it. Let's drag a Div block right into utility page rep. Then we'll make sure our assets for our utility pages are dragged in. Let's make sure those are added. In this Div block, we're going to use this Blue texture. We're going to drag it right into the Div block, and that's it. That's our 404 page, except we're not done. Let's add a class to this. We'll call it Circle Image. We'll set a width of 600 pixels, and let's round it. We can just set our radius, our border radius to 50%. that'll make a circle out of this.
Now, if this image did not have a perfect one by one aspect ratio, 50% would create an oval. If it was wider, it would create an oval this way. If it was taller, it would create an oval this way. But because it's a square image, it's 50%. We want to set its position to absolute, but let's not do that on the image. Let's select its parent, the Div block, and we'll say this is 404 interaction, which we'll style this as. That's the class name, and we'll set its position to absolute.
Now, because we set it to absolute, it's currently stacking on top of our other page content. So let's select Utility Page Content, and let's unlock Z index. By switching this to relative, it's automatically placing itself on top. Just to be safe, let's set a Z index of one to make sure it's stacked on top of anything underneath. Let's select that 404 interaction. Now we can move it freely. So, of course, if we added a transform, we could move it to the right, to the left, whatever we want. Let's undo there, and let's delete that move, because there's one more thing to add to our Div block. Let's duplicate with our circle image selected. Let's duplicate it.
Now, we have two of these images. We're going to select the second one, and we're going to turn it into a glow. So first let's create a combo class. Let's call this Glow. This is Circle Image Glow, and we're going to change a few things here. Let's set it to absolute position, and we want it to fill the space available inside its parent container. So we have a little shortcut here, which is full. Let's press that, and now it's set to 0% from the boundary of its parent. That's exactly what we want, but we also want ... We're on the glow effect here. Let's add a filter to blur this dramatically. Let's blur it, let's say, 75 pixels, and this is a good effect. This is okay on its own. We might also want to increase the saturation a little bit. So if this is 0%, this is 100%. Let's increase that. Let's go all the way to 200%.
It's also stacking. Right now, it's stacking on top of the circle image. So what we can do is use Z index a little more specifically on the first circle image, not the glow. We want that to have a higher Z index. We want that to stack on top of the glow. So let's set its Z index to two, and then we'll set the one underneath. It's inheriting two, because it's a combo class. So we'll set this to one. Then, of course, with our utility page content, let's set it to a higher number. Let's set it to three. Right now, looking at the frosted glass, it might work with a darker effect by default. Let's switch this to black with a higher opacity. Maybe a little bit lower, like 40. That looks pretty good.
Let's press Escape, and let's change one more thing. If we want to resize our 404 interaction, again, the size, this is set to auto width and height. The size is being determined from our circle image, our base circle image. So we can just hold down Option and resize this at any time. Notice how the glow is resizing with it. So maybe something a little bit more like this would look good. Let's make it a nice, round number, and let's add a quick interaction. Let's go to interactions, and we're going to add a page trigger while the mouse is moving in the viewport.
On Mouse move, we want to play a mouse animation, which we're designing right now, and we're going to add one. We're going to call this 404 Interaction. Here's how it works with X and Y for mouse position. When the mouse exposition is 0%, that's when the mouse is all the way to the left. When the mouse exposition is 100% down here, that's what happens when the mouse is all the way to the right. Same with Y. 0% is at the top. 100% is at the bottom.
So at 0%, let's move this to the left, and we can use pixel values if we'd like, or we can even use VW. We can say minus 10 VW or maybe minus 20 VW. It's okay. It's leaving the glow behind, but we can change that in just a moment. In fact, we can change it right now by changing it from selected element to the class. Since we're affecting the base class, it'll affect the base class and the glow combo class. So if that exposition is minus 20 VW when we're at 0%, let's change 100% to positive 20 VW. So just like that, we can turn on live preview and move to the left and right, and it's following our mouse position.
Let's do the same thing with our Y actions. Let's add 0%. We're going to move it up. We'll do minus 20. We'll do viewport height, and we'll do the same thing on the bottom. We'll do 20 viewport height. So what would that look like? Let's turn on live preview, and it's not going to work as expected. That's because we have to make sure on the Y action as well. We're affecting the class. So select the class. Turn on live preview again, and just like that, we're following not just left and right, but up and down.
Now, we can add a bit of a delay on this. We can add some damping. Let's turn on smoothing. Let's turn that up to something like 95%. Now if we go into preview mode, we can see it follows, but with a little bit of a delay. Of course, if we want to increase the drama of the effect, we can go into the 404 interaction and increase these numbers. Again, we can make this minus 30. We can make this one 30. Then we can do the same thing here. We can make minus 30 and positive 30. Preview, and now the effect is a little more pronounced. Of course, we might want to go back in and change the smoothing to something a little more dramatic, like 99%. Let's go to preview mode. That is significantly more dramatic.
In fact, let's time how long it's going to take to get from the bottom left corner of the screen to the bottom left corner of the screen. It was already there. That's part two. Let's move onto our final part, which is our frosted glass effect. We'll go out of preview mode, and we're going to effect this on the frosted glass class. Now, it's always a good idea to check a site like caniuse.com so we can see what the compatibility is of something like backdrop filter. As of the recording of this video, Firefox, for instance, does not support this by default. So keep that in mind, and test on as many browsers as possible. But we'll switch back over to Webflow, and we'll enable this on frosted glass.
Now, we've included the custom code down below so you can take a look at that and try this out for yourself. So let's add a custom code a bit. We'll scroll down to the bottom. We'll add an embed element, and we'll put that right inside the page body. We're going to paste in the custom code. We've added this snippet down below. We'll just paste in, and this is saying a few things. This is a style. We're applying it to frosted glass. Again, that's the name of our class here, and we've added a hyphen since by default, class names that have spaces in them are hyphenated in code.
All the code is saying is this. It's adding a backdrop filter. This is adding a backdrop filter in which everything behind this boundary, frosted glass, everything behind that boundary is going to increase its saturation to 200%. It'll increase its blur from non-existent to 10 pixels, and it'll keep the brightness where it is. You can change this value later based on what looks right. The next line is saying the same exact thing. The first one just has a WebKit prefix. So if you change a value in one of these, make sure to change it in the other as well.
So, again, frosted-glass with the hyphen, and we're going to press Save and close. Just like that, we have our frosted glass effect, but here's the impressive part. If we go in and go to Preview, we can see the interaction right behind our frosted glass. Now, if we want to go in and change those values, let's go out. With our HTML embed selected, let's press return, and let's change this. Maybe we want to increase the blur. Let's try 30 pixels, 30 pixels on each of these. Save and close, and now it's an even blurrier effect. You can see more of a blur behind the frosted glass.
But that's it for now. We covered our 404 structure, we covered our styling, and we even added custom code for the frosted glass design. We're going to take this even further in the next part of this course as we cover password-protected pages for sharing password-protected work with potential clients, clients of our completely fictional UX designer named Megan.
[Grimur] 404 means different things to everybody. It's the phone area code in Atlanta, Georgia, it was the year of the last gladiator fight in Rome, and it's the number of teeth I was born with, if you add 384 to the number of teeth I was born with. We've seen a lot of great designs and great site building. So make sure to share your custom 404 page using #21dayportfolio. Remember, we almost always post new lessons earlier on Webflow University, which is, by the way, free. So check that out if you're not already watching this there. Now, if you excuse me, I'm going to go and floss again.
