Creating Glass With CSS (3 Methods & Styles)

Greetings, human beings!

In this article, I'm going to demonstrate 3 styles of creating a glass-look using CSS. A bit of background on this: I've been creating glass-styled websites for years, because I personally love the look, but it seems to only recently be gaining popularity across the modern web. Seems like everyone wants in on the fad, so I figured... why not?

To create glass in CSS, I usually use two main methods, which I will demonstrate shortly. However, there is a third method, which you may not have considered before. With this third method, you can add a little "shine" to your glass effect, especially when combined with the other two methods.

Unfortunately, there are some issues with this third method, which I will explain when we get to it.

A small note about using glass in your designs:

'Glass', or at least the simulation of the look, is quite stylish and pleasing to the eyes, but it only works if it's paired with the right background. The simulation of a 'glass' look requires the use of contrast, which is good for accessibility, but can easily go wrong if you either don't know what you're doing, or don't think it through.

That said, 'glass' tends to look best, in my opinion at least, when paired with properly contrasting gradients, solid, dark backgrounds (when the shadows are outset), light backgrounds (when the shadows are primarily inset), and photographs:

Now let's get to the fun stuff - the coding.

Style used for all the examples in this tutorial:

As is my custom, I don't like to write a tutorial which uses customized visuals without explaining what I did, so here's a little insight.

I have 3 divs, all styled with the same properties:

div {
  align-items: center;
  background-color: rgba(35, 35, 35, 0.1);
  border: 1px solid rgba(235, 235, 235, 0.1);
  border-radius: 15px;
  color: white;
  display: flex;
  font-size: clamp(12px, 3vw, 2rem);
  font-weight: 300;
  letter-spacing: .375ch;
  justify-content: center;
  height: 27.35vh;
  margin: auto;
  position: relative;
  text-transform: uppercase;
  width: 27.35vw;
}

They're all laid out on the body of the document using Flexbox, and the body element uses a height of 100vh (view-height) and a linear-gradient for the background image:

body {
  align-items: center;
  background-image: linear-gradient(rgb(105, 35, 135), rgb(75, 35, 95), rgb(35, 48, 135));
  background-attachment: fixed;
  background-size: cover;
  display: flex;
  justify-content: space-around;
  margin: 0;
  padding: 0;
  height: 100vh;
}

Method 1 - Using 'box-shadow:' and 'background-color:'

.glass0 {
  box-shadow: inset 0 0 15px rgba(135, 135, 135, .1), 0 0 18px 3px rgba(0, 0, 0, .3);
}

This is the most straightforward method, and one you've probably seen many times over. It's simplistic in its construction, but surprisingly effective when combined with the right aesthetics:

You can use this method for a 'clear glass' effect by leaving off the first box-shadow (with inset), and you can achieve differing results by tweaking the style(s) of your shadow(s). Either way, it's quick, easy, and gives you a nice effect.

Method 2 - Using a pseudo-element with filter: blur()

This method is rather versatile, though, it does introduce performance issues if overused. What we do in this case, is position a pseudo-element (::after or ::before) behind the main element (which can be, itself, styled to look like glass as well).

Code:

.glass1 {
  box-shadow: 0 0 18px 3px rgba(0, 0, 0, .3);
}

.glass1::after {
  background-color: rgba(195, 195, 195, .1);
  bottom: 10px;
  content: '';
  filter: blur(32px);
  left: 10px;
  opacity: .5;
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: -1;
}

Real World Example: Glass Maker

Method 3 - Simulating Sheen

This method is the most complex, in terms of implementation. Unless you're naturally gifted in maths, this method will take some testing to get just right. It looks cool, and is responsive, but may need some help if you're using percentages or screen dimensions to determine positioning.

Code:

.glass2 {
  box-shadow: 0 0 18px 3px rgba(0, 0, 0, .3);
}

.glass2::after {
  background-color: rgba(255, 255, 255, .6);
  bottom: 49.65%;
  content: '';
  filter: blur(8px);
  left: .865%;
  position: absolute;
  right: .865%;
  top: 49.65%;
  transform: rotate(-45deg) skewX(20deg);
  z-index: -1;
}

I have not used this method in the real world, but it would look pretty cool in action. That said, you'll probably want to tweak it a bit, depending on the results you want.

Please note:
I'm not using backdrop-filter: blur(); in this tutorial. It's cool and all, and it produces exciting results, but it's not supported in Firefox. The methods I'm using here should work in all modern browsers, except IE 11, which doesn't support filters at all (necessary for methods 2 and 3).

If you don't care about Firefox support, then you can use backdrop-filter: blur();

That's all for now!

You'll notice that the 3rd method needs some tweaking in order to scale correctly, but don't worry, I'll probably fix it in the future.

You can find the code for this example on CodePen, here: https://codepen.io/rolandixor/pen/dyRBOxO

You can share your results in the comments, I'd be excited to say what you come up with!