Hi Devs, Its my first time writing here. I wish to share how I made a GlassMorphic Profile Card, and How you can make it just using HTML, CSS . #### Prerequisite : Basic knowledge of HTML, CSS I used Codepen to make this, coz i just find it convenient that I can just click on "New Pen" and start coding. So, lets not waste any time and start with making the actual thing. #### Here is what you will have at the end [Link to Codepen that I made](https://codepen.io/beetran/full/oNWXaEJ) First, we will start with a normal html document, now lets attach the libraries we will need. #### 1. Font-Awesome ```html ``` Copy this or simply copy the latest version from Font-Awesome website. Now, 1. Adding a div element and centering it. ```html

``` ```css #main{ max-width: 500px; height:310.5px; margin:auto; margin-top:140px; } ``` Height and width are totally subject to your needs, after that we horizontally centered div using "margin:auto" and then gave it a lil top margin. 2.Now, lets add two partitions to our main div. one for Photo and one for Info. ```html

``` now, we can use grid layout to position our photo div and info div nicely inside the main div. ```css #main{ max-width: 500px; height:310.5px; margin:auto; margin-top:140px; display:grid; grid-template-columns:40% 60%; } ``` by doing this , we gave 40% width to photo div and 60% width to info div. 3.Lets style our main card and add a background image. ```css #main{ display:grid; grid-template-columns:40% 60%; max-width: 500px; height:310.5px; margin:auto; margin-top:140px; background: linear-gradient(-45deg,rgba( 255, 255, 255, 0.1 ),rgba( 255, 255, 255, 0.4 )); box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); backdrop-filter: blur( 4px ); -webkit-backdrop-filter: blur( 4px ); border-radius: 10px; border: 1px solid rgba( 255, 255, 255, 0.18 ); } ``` We just added a diagonal linear gradient of two almost transparent colors to the background. then, a background blur filter, this will make it look more like glass. Border-radius to make the card look more and a border to create the fine line we have at glass corners. and the Box Shadow gives the illusion of depth. ```css body{ background-image:url('https://cdn.osxdaily.com/wp-content/uploads/2020/10/macos-big-sur-wallpaper-2-scaled.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } ``` I am sure you can recognize the Big Sur Dark wallpaper that i use as the background. Now, your card should start looking more like a card. ![Empty card](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s0m8i8felh1asjx4hyjp.png) Styling the card is almost done, now you can add to the card, whatever you want, but for this particular post, we are working on a profile card, so lets get with it. 4.Lets add your photo and style it to look good. I took a dummy image from unsplash , You should use your photo in this. ```html

``` ```css #profilepic{ height:140px; width:140px; box-shadow: 0 0 42px 0 rgba( 255, 255, 255, 0.17 ); background: rgba( 255, 255, 255, 0.25 ); backdrop-filter: blur( 4px ); -webkit-backdrop-filter: blur( 4px ); border: 3px solid rgba( 255, 255, 255, 0.18 ); border-radius:50%; object-fit: cover; object-position: 50% 10%; } #photo{ display: flex; justify-content: center; align-items: center; } ``` Here, we used a flex display for photo div and we added an image tag with the image on it. image is aligned into the middle using justify-content and align items. [this is nice about flex, alignments are easier] now, the styling of photo is also pretty much understandable from how we made main card into glass. what's new is the border radius, and you must know that " border-radius:50% ; " means a circle. Well, You have done everything alright if your card looks something like this. ![card with just photo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rz1lf6vm27mhqyxg1apb.png) If everything is good till now, lets move on to next step. 5.Now lets give the card your name and add some contact links. You will have to choose a font now, I choose Montserrat, and I prefer you to choose the same, but, no bars, let your imagination run wild and try if some other fonts can make it look better. Copy the import tag from [Google Fonts](https://fonts.google.com/) ```css @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400&display=swap'); body{ font-family: 'Montserrat', sans-serif; } ``` lets write some names now ```html

[Your name]

[Your designation]

``` I divided info div into two. One for name and another for contact links. now, add some links to your social accounts. ```html

[Your name]

[Your designation]

``` here, We used font awesome icons to add social icons as links. Yes, nothing looks good right now. Lets use magical CSS to make it look good. ```css #info{ display: flex; flex-direction:column; justify-content: center; align-items: center; text-align:center; } #name{ color:rgba(255,255,255,0.6); border-bottom:2px solid rgba(255,255,255,0.2); padding:0 40px; } #contacts{ display:flex; flex-direction:row; } .link{ background: rgba( 255, 255, 255, 0.25 ); box-shadow: 0 0px 32px 0 rgba(255,255,255,0.1); backdrop-filter: blur( 4px ); -webkit-backdrop-filter: blur( 4px ); border: 1px solid rgba( 255, 255, 255, 0.18 ); display:block; font-size:40px; padding:4px; border-radius:50%; width:48px; height:48px; margin: 10px; cursor:pointer; } ``` Now, lemme break down this css We again used flex for info div and centered items. We gave name a more white color , but still its somewhat translucent, and the border in name styling is for making a neat line between name and links. Now, social icons are styled in a similar way we styled our card and the size you can change are per your wish, 48 px suited me, so i kept 48px. lets add a small hover effect to contact links ```css .link:hover{ transform:translateY(-2px); transition: all 0.5s; background: rgba(255,255,255,0.5); } ``` #####Congrats! you have made through my first post and you have a nice looking Glassmorphic profile card with you. [Link to Codepen that I made](https://codepen.io/beetran/full/oNWXaEJ) One extra thing in this codepen is the gradient added to social icons, well, i didnt add them in this post because explaining them would be a bit long and that would have make the post longer. I will surely explain that in my next post and, hey, consider liking this post and, save it so you can refer to it later. Follow your friend for more and yea, tell me if this could be made better in comments. Thanks, have a good day.🙂

beetrandahiya

Making a GlassMorphic Profile Card

Join Our Newsletter. No Spam, Only the good stuff.