DEV Community

Cover image for Flipping Card in CSS
Dhairya Shah
Dhairya Shah

Posted on • Originally published at

Flipping Card in CSS

Hello Folks 👋

What's up friends, this is SnowBit here. I am a young passionate and self-taught frontend web developer and have an intention to become a successful developer.

Today, I am here with a cool CSS tutorial and you'll love it. Let's get started 🚀

  • Create a card
<div class="card">
  <div class="card-side front">
    <div>Front Side</div>
  <div class="card-side back">
    <div>Back Side</div>
Enter fullscreen mode Exit fullscreen mode
  • It's time to style them
@import url(',wght@0,700;1,400&display=swap');
  font-family: "Poppins", sans-serif;
.card {
  perspective: 150rem;
  position: relative;
  height: 40rem;
  max-width: 400px;
  margin: 2rem;
  box-shadow: none;
  background: none;

.card-side {
  height: 35rem;
  border-radius: 15px;
  transition: all 0.8s ease;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 80%;
  color: white

.card-side.back {
  transform: rotateY(-180deg);
  background-color: #4158D0;
  background-image: linear-gradient(to right, rgb(236, 72, 153), rgb(239, 68, 68), rgb(234, 179, 8))

.card-side.front {
  background-color: #0093E9;
  background-image: linear-gradient(to right, rgb(134, 239, 172), rgb(59, 130, 246), rgb(147, 51, 234))

.card:hover .card-side.front {
  transform: rotateY(180deg);

.card:hover .card-side.back {
  transform: rotateY(0deg);
Enter fullscreen mode Exit fullscreen mode

You made it 🌟

Check out the pen -

So, this was it for this article. I hope you learnt something new and enjoy reading. Stay tuned for the next article.

Let's connect on Twitter - @codewithsnowbit

🌏 Let's connect

Buy me a coffee

Top comments (0)