How to nail the Web 2.0 Gloss look on your website

In this post I will share some of the techniques I've used to make my Frutiger Aero Archive website, as well as some of the mistakes I did that you should avoid. If you're interested in more tutorials like this in the future, let me know.

Inspiration from old websites

The first lesson to nail the look is to have a good inspiration. It is the same with any art-form, be it drawing, music, or other creative tasks. Once you have a good inspiration you're better equipped to create your own work.

So to do that, let's visit some websites and observe what they did. Since we are trying to achieve that Web 2.0 Gloss look, we need to look at some old websites that use this style, they were most common from around 2007 up until the early 2010s.

My favorite resource for finding such websites is the Web Design Museum, which lets you search by year.

The BlackBerry website in 2007 shows a shiny, reflective and glassy UI. The phones reflect, as if they were mimicking real life objects standing on a glass stand, this is called skeuomorphism, and it's an important part of Web 2.0 Gloss and the Frutiger Aero aesthetic.

The Windows Vista website in 2008 also features reflections under objects. The interface is very reminiscient of Windows Vista, and also follows the AERO design guidelines. you can also see the gradients in the buttons, and the general layout. Overall, it offers a friendly, pleasant atmosphere.

Another similar example from the Windows Mobile website in 2008, same gradients in the buttons, and reflections under the objects.

On the WinZip 2008 website, we can see glossy buttons, with a gradient that gets slightly lighter in color at the bottom, and a reflection on top. I will show you how to replicate this later.

Same thing here, you can see reflections under the objects and slim fonts (in this case, it uses Arial). I recommend you to look at more websites for inspiration, and look at what fonts they are using by using the inspect tools or a browser extension.

Bubbly, Glossy Buttons (In Figma)

As we have seen on the WinZip website, glossy buttons with a shine were often used in those days. Down below is a button I designed myself using Figma:

Here's how it looked like in the project file:

First the main gradient, it's important for the second and third to have the same percentage, so there is a straight line instead of it being too blurry.

This is a secondary gradient that I've put in the middle to give it a bit more depth, but you don't need to put it.

This is the gardient for the reflection, which the opacity is higher in the top part and gradually becomes transparent. You also need to add a border radius to this part.

Bubbly, Glossy Buttons (In CSS)

If you don't want to use images, CSS lets you use gradients as well, albeit it is a bit more limited in terms of how far you can go. On the Frutiger Aero Archive, I've mostly used CSS to do my buttons.

To do that, you need to use the linear-gradient property as a background for whatever you want to become a button, could be a div or a anchor, or anything else really.

Here's an example in practice, with the gradient going from top to bottom:

background: linear-gradient(to bottom, 
    #c8ffc5 0%, 
    #1fbf24 55%,
    #009a05 55%, 
    #457a28 100%
);
text-align: center;

Example

Now to add the reflection to this gradient, you need to add the use the ::before CSS selector, which lets you add another gradient on top of the first one.

First, select your div and give it this CSS:

.example-div {
background: linear-gradient(to bottom,
    #c8ffc5 0%,
    #1fbf24 55%,
    #009a05 55%,
    #457a28 100%
);
border: 1px solid black;
display: flex;
align-items: center;
justify-content: center;
position: relative;
height: 30px;
}

Then after that, select it again but with the ::before in front of it and give it this CSS:

.example-div::before {
background: linear-gradient(to bottom,
    rgb(255, 255, 255) 0%,
    rgba(255, 255, 255, 0.5) 100%
);
border-radius: 20px;
position: absolute;
content: "";
height: 16px;
width: 90%;
top: 0px;
opacity: 0.3;
}

Example 2

What it does is place the second gradient on top of the other one using the position: absolute; property, which we center using display: flex. Don't forget the position: relative; property on the parent element, or the gradient will be somewhere on the top of your page.

Choose your fonts correctly

My biggest mistake when I first made my site was using the wrong font, and especially the wrong font weight, which didn't give it the clean, sharp look that we commonly associate with Web 2.0 Gloss.

I recommend you to go for slim sans-serif fonts, such as Tahoma, Arial or Segoe UI. On my website and this blog, I used the Segoe UI Semilight font. You can search it online to download it.

When you want to add it, you first need to initialize the font in CSS to be able to use it:

@font-face {
  font-family: "Segoe UI Semilight";
  src: url("../fonts/segoe_ui_semilight.ttf") format("truetype");
}

And then, you can just apply it to an element like you would with default ones with the name you gave to it.

body {
font-family: "Segoe UI Semilight", Tahoma, sans-serif;
}

Glassy Look / Transparent Windows

Also in CSS, you can make background colors of a div become transparent. When doing this, be sure to not use HEX colors, use RGBA instead, as HEX colors with transparency values will not work on older browsers, unlike RGBA.

Here's an example of a transparent background:

background: rgba(39, 39, 39, 0.5);

The 0.5 at the end is the level of transparency you want.

You can use transparent RGBA colors on gradients too, so if you want a transparent button, you can also do it this way.

Now if you want to blur the background behind for more readability, that's how you do it:

backdrop-filter: blur(5px);

Simply adjust the px value to get it to be more or less blurry, but don't over-do it, or it will look more like frosted glass than Aero glass. I typically go for 1 to 2 pixels of blur.

Reflections under objects (CSS)

As you saw in some of the site examples I provided, there's often a reflection under the objects that make it look like it's standing on top of glass.

There is a native way to do it in CSS, but it is only supported on WebKit compatible browsers like Safari and Chrome, so I do not recommend it if you care about Firefox users.

The value of the box-reflect property can be: below, above, left, or right.

img {
  -webkit-box-reflect: below;
}

For more info on this property and its settings, check out this website.

There are other solutions using CSS that are more universal, but they are (in my opinion) pretty complicated, so my preferred way to do it is directly editing the images.

Still, if you want to check them out, here's a few links that could help you:

1. Creating Realistic Reflections With CSS (CSS Tricks)
2. How to create reflection effect using HTML and CSS (GeekForGeeks)
3. CSS Image Reflections: A Comprehensive Guide (OpenReplay Technical Blog)

Reflections under objects (Editing Images)

For something that is garanteed to work on all browsers, including your grandma's Netscape, you can use a website such as generateit.net to add a reflection under your images, but be warned, it might not work properly if there is some empty space below your images.

Here's an example of it in action:

In the cases when it does not come out perfect, you should use an image editor such as Photopea, Gimp, or Photoshop, and duplicate the layer, invert it vertically, and add a opacity gradient to it to make it go transparent.