DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 966,155 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Most fast create card with Glassmorphism effect
Matheus Maximiliano
Matheus Maximiliano

Posted on

Most fast create card with Glassmorphism effect

Lest go, this tutorial are very fast, to you create a very beautiful card using grassmorphism effect with css, in your project! ๐Ÿ’ฅ

We have 3 steps to create this card. ๐Ÿงพ

1. Create our structure, so can create with HTML, or React with JSX/TSX, so, wherever technology that you use to create, make this.

In my exemple, I use HTML.

Card HTML

2. now, lets go create our css

For this, we need attention for 2 things

โš  The footer element receive our grassmorphism effect, so, this it need a opacity in your background-color for you can see the effect.

โš  For opacity I used direct in HEX code color, like this #fafafa77 this 77 is like a opacity in HEX, test after you create this card.

For your header we create this code.

Header card CSS

And for footer this code.

Footer card CSS

๐Ÿš€ NICE, we create the beautiful card with glassmorphism effect, and if you lets create another element with this effect, use the code:

backdrop-filter:blur(1rem)
Enter fullscreen mode Exit fullscreen mode

And don't forgot to opacity in element that have received this effect.

Finality this is our result!

Card with glassmorphism

.
.
.
.
.
From post in PT-BR
Instagram: @imatheus.max
Post: https://www.instagram.com/p/Cdlk5fTAWEy/

Top comments (0)

๐ŸŒš Friends don't let friends browse without dark mode.

Sorry, it's true.