CSS Frosted glass credit card
Tags: css
Published: 2020-12-21 05:58:57

Today I wanted to try and recreate a super cool [dribbble shot from Dede Dwiyansyah](https://dribbble.com/shots/14647209-Glass-Credit-Card) I came across.

![Dribbble frosted glass credit card](https://cdn.dribbble.com/users/3967258/screenshots/14647209/media/d6905571f5821097b3dcc631ef08365b.png?compress=1&resize=1600x1200)

It's actually a Figma tutorial on how to create the frosted credit card effect. I decided to try and recreate this amazing shot in HTML! (With an own twist)

So time to give it my own take on `CSS`.

I knew it was possible to do this effect, but normally people leverage a background image filter blur, which in this case wouldn't work with the balls behind it.

So I decided to do some research, and this is my end result.

![CSS Glass credit card effect](https://cdn.hashnode.com/res/hashnode/image/upload/v1608102470435/-0TC-j9Is.gif)

I'll be guiding you through how to make this in CSS.

## HTML Structure

Let's start by defining the `HTML` structure for this project.

```html
<div class="holder">
  <div class="card">
    <div class="card__text">
      8293 3412 5976 1254
      <br />
      <small>12/24</small>
    </div>
    <svg>Insert Visa logo here</svg>
  </div>
</div>
```

As you can see I'm using a holder div, we need this div for the two orbiting balls.

Then we have the card, which contains another container for the text, and at the end, an SVG for the visa logo.

> Note: The full SVG visa logo can be found on the Codepen.

Now it's time to start the fun bit, the `CSS`.

## CSS Frosted blurry glass effect

I'm going to be guiding you through all the little pieces we need to re-create this cool CSS frosted glass effect.

First, we need to use a font that resembles a credit card font.
I found the [Inconsolata font on Google fonts](https://fonts.google.com/specimen/Inconsolata) works pretty well.

```css
@import url('https://fonts.googleapis.com/css2?family=Inconsolata&display=swap');
```

With this line, we [import the font directly from Google fonts](https://daily-dev-tips.com/posts/how-to-use-google-fonts/).

Next, we add a small reset to get rid of the default margins and paddings.

```css
* {
  margin: 0;
  padding: 0;
}
```

Now let's style the body.
In the dribbble shot, we saw the person used a gradient background, I decided to give it a background image.

```css
body {
  background: url('https://images.pexels.com/photos/1655166/pexels-photo-1655166.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260')
    no-repeat center center;
  background-size: cover;
  display: grid;
  font-family: 'Inconsolata', monospace;
  min-height: 100vh;
  place-items: center;
}
```

I'm also using the [CSS grid center method](https://daily-dev-tips.com/posts/css-grid-most-easy-center-vertical-and-horizontal/) to get the card centered on our page.
In this spot, we are also loading our fonts.

As mentioned we are using the holder to place our two orbiting balls in.
We will be using pseudo-elements to create these balls, so our holder will need to be a relative element.

```css
.holder {
  position: relative;
}
```

Now let's create the balls, the orange one will be created using the [`before` pseudo element](https://daily-dev-tips.com/posts/css-pseudo-elements/) and the blue one with the [`after` pseudo element](https://daily-dev-tips.com/posts/css-pseudo-elements/).

They share some similarities, in size and roundness so let's write that with a double selector.

```css
.holder:before,
.holder:after {
  animation: orbit 5s linear infinite;
  border-radius: 50%;
  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.2);
  content: '';
  height: 150px;
  position: absolute;
  width: 150px;
}
```

This creates a round ball because of the 50% border-radius.
We also add an animation called `orbit`. We'll create the animation in a bit.

Now for the orange ball, we need to create a radial gradient.

```css
.holder:before {
  background: #ffe897;
  background: -moz-radial-gradient(top right, #ffe897, #f98a05);
  background: radial-gradient(to bottom left, #ffe897, #f98a05);
  background: -webkit-radial-gradient(top right, #ffe897, #f98a05);
}
```

I used [css-gradient.com](https://www.css-gradient.com/) to generate the gradient.

Then for the blue one, we also place a radial gradient and offset it to the right side.
This one also needs an animation delay, else they'll be doing the exact same thing.

```css
.holder:after {
  animation-delay: 2.5s;
  background: #e0e793;
  background: -moz-radial-gradient(bottom right, #e0e793, #6dd0f1);
  background: radial-gradient(to top left, #e0e793, #6dd0f1);
  background: -webkit-radial-gradient(bottom right, #e0e793, #6dd0f1);
  right: 0;
  top: 0;
  z-index: -1;
}
```

Then it's time to add our card.

The card itself has a fixed size and a small box-shadow to make it pop a bit more:

```css
.card {
  border: 1px solid #fff;
  border-radius: 15px;
  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.2);
  font-size: 2rem;
  height: 220px;
  overflow: hidden;
  position: relative;
  width: 370px;
}
```

Then for the magic part, the blur effect we use another [`:before` pseudo element](https://daily-dev-tips.com/posts/css-pseudo-elements/).

```css
.card:before {
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px) saturate(100%) contrast(45%) brightness(130%);
  content: '';
  height: 100%;
  position: absolute;
  width: 100%;
}
```

The whole magic blur effect comes from the `backdrop-filter` this gives it the blurry look.
We also use a background color with an opacity of 30% using the `rgba` spectrum.

For the text inside we only need to offset it a bit and make sure it's on top of everything.

```css
.card__text {
  color: #6f7886;
  margin-left: 30px;
  margin-top: 100px;
  position: relative;
  z-index: 2;
}
```

Remember we had the Visa SVG logo, we put that in the right bottom corner.

```css
.card svg {
  bottom: 30px;
  position: absolute;
  right: 30px;
}
```

Before we talked about the `orbit` animation, this animation will make the two balls orbit around the card, in a circular motion.

```css
@keyframes orbit {
  from {
    transform: rotate(0deg) translateX(100px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(100px) rotate(-360deg);
  }
}
```

This specific animation uses a two-step animation transforming the elements to rotate from 0 to 360 degrees (a full circle).
It also offsets the `translateX` axis to make it move.

The full result of this can be seen on this Codepen.

{% codepen https://codepen.io/rebelchris/pen/WNGpVEZ %}

## Browser Support

This method relies heavily on the `backdrop-filter` which has quite decent support.

It can be safely used in all modern browsers, you can get some more support by leveraging all the prefixes for it.

![CSS backdrop-filter support](https://caniuse.bitsofco.de/static/v1/mdn-css__properties__backdrop-filter-1608101950999.png)

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)