Creating a Stylish Profile Card with a Wave Transition in HTML & CSS

A well-designed profile card can make a powerful first impression on your personal portfolio. In this post, I’ll walk you through how I designed and coded a modern, clean profile card with a wave transition using just HTML and CSS.

🔧 Project Goal

The goal was to design a profile card that’s visually appealing and functional, suitable for showcasing a developer or team member. I wanted to include:

  • A clean profile image
  • A creative transition between the image and text using a CSS wave
  • Smooth visual flow with no JavaScript
  • Fully responsive layout using modern CSS techniques

🧱 HTML Structure

The HTML is semantically structured into three key parts:

  • .card-wrapper: the container for the entire component
  • .image: wraps the image and wave effect
  • .content: holds the profile name and role

<div class=”card-wrapper”>
<div class=”image”>

<img src=”image_sourch” alt=”wave-card-image” />
<div class=”wave-wrapper”>
<div class=”wave”></div>
</div>
</div>
<div class=”content”>
<h3>Md Ashaduzzaman Mukul</h3>
<h5>Sr. WordPress Developer</h5>
</div>
</div>

🎨 CSS Styling Highlights

1. Card Wrapper Styling
.card-wrapper {
position: relative;
width: 400px;
box-shadow: 0 0 50px 30px rgba(0, 0, 0, 0.1);
border-radius: 20px;
overflow: hidden;
}

The card has a soft shadow and rounded corners for a clean, modern feel.

2. Wave Effect
The wave is created using an overlapping

with creative use of border-radius, box-shadow, and transform.

.card-wrapper .wave-wrapper .wave {
position: absolute;
bottom: -200px;
left: calc(50% – 150px);
width: 300px;
height: 270px;
background-color: #ffffff;
border-radius: 100px;
transform: rotate(45deg);
}

The ::before and ::after pseudo-elements extend the wave for a natural curve using shadows.

.card-wrapper .wave::before,
.card-wrapper .wave::after {
content: “”;
position: absolute;
width: 300px;
height: 300px;
border-radius: 100px;
}

.card-wrapper .wave::before {
left: -300px;
bottom: 23px;
box-shadow: 50px 150px #ffffff;
}

.card-wrapper .wave::after {
right: 50px;
bottom: 270px;
box-shadow: 150px 50px #ffffff;
}

Why This Design Works

  • Wave transition creates visual separation while maintaining harmony between image and text.
  • Shadow and border-radius bring depth without clutter.
  • No JS dependency makes it lightweight and fast.