Today I wanted to try and recreate a super cool I came across. dribbble shot from Dede Dwiyansyah 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. 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. 8293 3412 5976 1254 12/24 Insert Visa logo here < = > div class "holder" < = > div class "card" < = > div class "card__text" < /> br < > small </ > small </ > div < > svg </ > 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 works pretty well. Inconsolata font on Google fonts @ url( ); import 'https://fonts.googleapis.com/css2?family=Inconsolata&display=swap' With this line, we . import the font directly from Google fonts Next, we add a small reset to get rid of the default margins and paddings. * { : ; : ;
} 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. { : ( )
    no-repeat center center; : cover; : grid; : , monospace; : ; : center;
} body background url 'https://images.pexels.com/photos/1655166/pexels-photo-1655166.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260' background-size display font-family 'Inconsolata' min-height 100vh place-items I'm also using the to get the card centered on our page. In this spot, we are also loading our fonts. CSS grid center method 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. { : relative;
} .holder position Now let's create the balls, the orange one will be created using the and the blue one with the . before pseudo element after pseudo element They share some similarities, in size and roundness so let's write that with a double selector. , { : orbit linear infinite; : ; : (0, 0, 0, 0.2); : ; : ; : absolute; : ;
} .holder :before .holder :after animation 5s border-radius 50% box-shadow 0 0 1rem 0 rgba content '' height 150px position 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. { : ; : (top right, #ffe897, #f98a05); : (to bottom left, #ffe897, #f98a05); : (top right, #ffe897, #f98a05);
} .holder :before background #ffe897 background -moz-radial-gradient background radial-gradient background -webkit-radial-gradient I used to generate the gradient. css-gradient.com 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. { : - ; : ; : (bottom right, #e0e793, #6dd0f1); : (to top left, #e0e793, #6dd0f1); : (bottom right, #e0e793, #6dd0f1); : ; : ; : - ;
} .holder :after animation-delay 2.5s background #e0e793 background -moz-radial-gradient background radial-gradient background -webkit-radial-gradient 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: { : solid ; : ; : (0, 0, 0, 0.2); : ; : ; : hidden; : relative; : ;
} .card border 1px #fff border-radius 15px box-shadow 0 0 1rem 0 rgba font-size 2rem height 220px overflow position width 370px Then for the magic part, the blur effect we use another . :before pseudo element { : (255, 255, 255, 0.3); : (10px) (100%) (45%) (130%); : ; : ; : absolute; : ;
} .card :before background-color rgba backdrop-filter blur saturate contrast brightness content '' height 100% position 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. { : ; : ; : ; : relative; : ;
} .card__text color #6f7886 margin-left 30px margin-top 100px position z-index 2 Remember we had the Visa SVG logo, we put that in the right bottom corner. { : ; : absolute; : ;
} .card svg bottom 30px position right 30px Before we talked about the orbit animation, this animation will make the two balls orbit around the card, in a circular motion. @ orbit { { : (0deg) (100px) (0deg);
  } { : (360deg) (100px) (-360deg);
  }
} keyframes from transform rotate translateX rotate to transform rotate translateX rotate 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. 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. 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 or Facebook Twitter Previously published at https://daily-dev-tips.com/posts/css-frosted-glass-credit-card/

Ball

CodePen

Facebook

Google

ORANGE

Super

Twitter

Visa

Write A Letter Your Future Self Will Thank You For 

This CSS Cut Out Effect is Guaranteed to Blow Your Mind 🤯

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

CSS Recreation: The Frosted Glass Credit Card Design

CSS Recreation: The Frosted Glass Credit Card Design

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Creating Mouse Tracking Eyes using Javascript 👀

06/02/2018: Biggest Stories in the Cryptosphere

08/06/2018: Biggest Stories in the Cryptosphere

04/05/2018: Biggest Stories in the Cryptosphere

08/02/2018: Biggest Stories in the Cryptosphere

Creating Mouse Tracking Eyes using Javascript 👀

06/02/2018: Biggest Stories in the Cryptosphere

08/06/2018: Biggest Stories in the Cryptosphere

04/05/2018: Biggest Stories in the Cryptosphere

08/02/2018: Biggest Stories in the Cryptosphere

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps