DEV Community 👩‍💻👨‍💻

Cover image for Beautiful card with blur background - Glass effect - A step-by-step tutorial
Designyff
Designyff

Posted on • Originally published at designyff.com

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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

.card .info b {
    font-size: 24px;
}
Enter fullscreen mode Exit fullscreen mode

And that's it.

You can find video tutorial and full code here.

Thanks for reading. ❤️

Top comments (0)

Want to rep DEV and be comfy at the same time?

Check out our classic DEV shirt — available in multiple colors.