Hey everyone 👋🏻, today we are going to make a glass morphism card using only HTML and CSS!
Now, what is glass morphism, it is a UI trend which was trending in recent times and is very very easy to make, so without wasting any time let's get started 👩🏻‍💻.
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://codepen.io/shreyas13/pen/YzVXPYL">https://codepen.io/shreyas13/pen/YzVXPYL</a></div>
<h2 id="steps-to-make-a-glass-morph-card">Steps to make a glass-morph card :</h2>
<ol>
<li>Make a <code>div</code> with a linear gradient(not necessary) or make any shape, this shape will go behind the card to make it look translucent. 
</li>
<li>Make the <code>div</code> with a class of <code>card</code>, give it some width and height, center it on the screen using <code>position: absolute;</code> or <code>display: flex</code> whichever method you like. 
</li>
<li>Now there are 2 main properties to be applied on the card, which will make it look like translucent object, the properties are :
<pre><code class="lang-css">background: linear-gradient(
 101.96deg,
 rgba(249, 249, 249, 0.261) -0.52%,
 rgba(249, 249, 249, 0.0775668) 88.4%,
 rgba(249, 249, 249, 0.058) 100.25%
);
</code></pre>
<pre><code class="lang-css">backdrop-filter: blur(20px); /* some browsers don't support this property but if you still wanna try it out then use chrome */
</code></pre>
</li>
</ol>
That's it you have made a glass-morph card on your own 🥳!! Wasn't that easy?!!
<hr />
Thank you for reading the whole blog 🎉, and if you found it helpful then do implement this in your projects!!
<hr />
// connect: 
<a target="_blank" href="https://linktr.ee/shreyazz">My Socials</a>

Hey everyone 👋🏻, today we are going to make a glass morphism card using only HTML and CSS!

Now, what is *glass morphism*, it is a UI trend which was trending in recent times and is very very easy to make, so without wasting any time let's get started 👩🏻‍💻.



%[https://codepen.io/shreyas13/pen/YzVXPYL]

## Steps to make a glass-morph card :

1. Make a `div` with a linear gradient(not necessary) or make any shape, this shape will go behind the card to make it look translucent. 

2. Make the `div` with a class of `card`, give it some width and height, center it on the screen using `position: absolute;` or `display: flex` whichever method you like. 

3. Now there are 2 main properties to be applied on the card, which will make it look like translucent object, the properties are :
``` css
background: linear-gradient(
    101.96deg,
    rgba(249, 249, 249, 0.261) -0.52%,
    rgba(249, 249, 249, 0.0775668) 88.4%,
    rgba(249, 249, 249, 0.058) 100.25%
  ); 
```
``` css
  backdrop-filter: blur(20px); /* some browsers don't support this property but if you still wanna try it out then use chrome */
```

That's it you have made a glass-morph card on your own 🥳!! Wasn't that easy?!!

-----

Thank you for reading the whole blog 🎉, and if you found it helpful then do implement this in your projects!!


-----
// connect: 
[My Socials](https://linktr.ee/shreyazz)








 

In this blog, I have made a very simple yet amazing looking card, using glassmorphism, which will make it look translucent and give a glass effect to it.

How to make a glassmorphism card | Glassmorphism card using CSS

Make a Glassmorph card in less than 5 minutes!

I am Shreyas Pahune a full-stack web developer, a UI/UX Designer and a technical writer.
