Beautiful card with blur background - Glass effect - A step-by-step tutorial

Tutorial on how to create a beautiful card with blur background.

HTML

For HTML, we need a div element with a "card" class.

Inside of the card element, we need two divs, one with "profile" and the other with "info" class.

Inside info element, we'll place a name in b tag, and a job title in span tag.

And that's it for the HTML code.

<div class="card">
    <div class="profile"></div>
    <div class="info">
        <b>Jane Doe</b>
        <span>Photographer</span>
    </div>
</div>

CSS

For CSS, first we'll style the card element.

We'll set light transparent yellow background color fit blur filter set to 5 pixels. This will create a nice glass effect.
Now we'll add some paddings, border radius and display items in column, aligned in center with 30px gap.

Lastly, we'll set position to relative, overflow to hidden and add a little box shadow.

.card {
    background-color: rgba(255, 170, 0, 0.4);
    backdrop-filter: blur(5px);
    padding: 30px 80px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 30px #000;
}

Now, using before pseudo class, we'll create the brown transparent shape that is placed on top of the card.

To achieve that, we'll set content, background to transparent brown, position to absolute with top set to -30px, left to -10px, right to -20px and height to 150px.

Using transform rotate, we'll rotate the element by 8 degrees, and add a little box shadow.

.card:before {
    content: '';
    position: absolute;
    background-color: rgba(0, 0, 0, 0.7);
    top: -30px;
    left: -10px;
    right: -20px;
    height: 150px;
    transform: rotate(8deg);
    box-shadow: 0 0 20px #000;
}

Now we'll style the profile element (the picture).

We'll set background to url of the image, size to cover and position to center.

We'll set width and height to 160x160 pixels and border-radius to 50%, with 3px solid goldish border.

Lastly, we'll set z-index to 1, otherwise, the brown shape will be positioned on top of our image.

.card .profile {
    background-image: url('https://fixthephoto.com/blog/UserFiles/double-exposure-self-portrait-photography-actions-before.jpg');
    height: 160px;
    width: 160px;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    border: 3px solid rgb(255, 180, 29);
    z-index: 1;
}

Now we'll style the info section.

Using flexbox, we'll align items in column with 5px gap, aligned in center.

.card .info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
}

Lastly, we'll increase the text with name by setting font size to 24 pixels.

.card .info b {
    font-size: 24px;
}

And that's it.

You can find video tutorial and full code here.

Thanks for reading. ❤️