If you want to grab attention on your website with a modern, eye-catching UI element, a 3D Flip Card with a Neon Effect is the perfect choice. This animation not only looks futuristic but also improves user interaction by making your content stand out.
In this tutorial, I’ll share the HTML & CSS code so you can easily add this effect to your own projects. Whether you’re building a portfolio, a landing page, or a product showcase, this design will give your website a stylish, tech-inspired look.
You can view the full project and download the source code from my GitHub repository here → 3D Flip Card with Neon Effect.
Why Use a 3D Flip Card with Neon Effect?
-
Interactive & Engaging – Users can hover over the card and see a smooth 3D flip animation.
-
Modern Neon Glow – The neon effect creates a futuristic and premium vibe.
-
Lightweight & Fast – No JavaScript required; just pure HTML & CSS.
-
Customizable – Easily change colors, sizes, and glow intensity to match your brand.
HTML & CSS Code for the Neon Flip Card
Below is the full code. Simply copy and paste it into your project files. You can also modify the colors, text, and card size as per your needs.
For the complete code with demo files, check my GitHub repo → Click Here
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ===( CODE LSD )=== -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Neon Flip 3D Cards with Animation | CODE LSD </title>
<!-- === Custom CSS === -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Card Title</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure alias ipsam repudiandae laudantium perspiciatis itaque?
</p>
See More
Neon
3D
<h1>Card Title</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure alias ipsam repudiandae laudantium perspiciatis itaque?
</p>
See More
Neon
3D
<h1>Card Title</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure alias ipsam repudiandae laudantium perspiciatis itaque?
</p>
See More
Neon
3D
<h1>Card Title</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure alias ipsam repudiandae laudantium perspiciatis itaque?
</p>
See More
Neon
3D
</body>
</html>
/* ===( CODE LSD )=== */
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@200;500;700;800;900;1000&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Nunito", sans-serif;
}
body{
background-color: rgb(20, 20, 20);
padding: 0px 50px;
}
.container{
padding: 50px 0px;
height: 100vh;
display: flex;
gap: 50px;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.parent{
height: 400px;
width: 300px;
padding: 20px;
perspective: 1000px;
}
.card{
padding-top: 100px;
transform-style: preserve-3d;
background-image: url("https://images.pexels.com/photos/1629236/pexels-photo-1629236.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
background-position: center center;
width: 100%;
transition: all 0.5s ease-in-out;
border-radius: 10px;
}
.card:hover{
background-position: 80% 20%;
transform: rotate3d(0.5, 1, 0, 30deg);
}
.content-box{
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.811);
border-radius: 0px 0px 10px 10px;
box-shadow: rgba(0, 115, 255, 0.925) 0px 20px 50px -25px;
transition: all 0.5s ease-in-out;
padding: 50px 25px 25px 25px;
transform-style: preserve-3d;
}
.card-title{
color: white;
font-size: 25px;
font-weight: 900;
transition: all 0.5s ease-in-out;
transform: translate3d(0px, 0px, 20px);
}
.card-title:hover {
transform: translate3d(0px, 0px, 50px);
}
.card-content{
padding-top: 15px;
font-size: 12px;
color: rgb(185, 185, 185);
transition: all 0.5s ease-in-out;
transform: translate3d(0px, 0px, 20px);
}
.card-content:hover{
transform: translate3d(0px, 0px, 50px);
}
.see-more{
display: block;
font-weight: 900;
font-size: 11px;
text-transform: uppercase;
color: rgb(0, 136, 255);
padding-top: 15px;
transition: all 0.5s ease-in-out;
transform: translate3d(0px, 0px, 20px);
}
.see-more:hover{
transform: translate3d(0px, 0px, 50px);
}
.date-box{
position: absolute;
top: 75px;
left: 25px;
height: 60px;
width: 60px;
background-color: black;
border-radius: 10px;
padding: 12px;
box-shadow: rgb(0, 102, 255) 0px 20px 60px 0px, rgb(0, 200, 255) 0px 18px 36px -18px;
transform: translate3d(0px, 0px, 50px);
}
.date-box span{
display: block;
text-align: center;
}
.date-box .month{
color: white;
font-size: 12px;
font-weight: 700;
}
.date-box .date{
font-size: 19px;
font-weight: 900;
color: rgb(0, 136, 255);
}
.card2{
filter: hue-rotate(150deg);
}
.card3{
filter: hue-rotate(300deg);
}
.card4{
filter: hue-rotate(90deg);
}
How It Works
-
Perspective Effect – The
perspectiveproperty gives a 3D feel. -
Flip Animation – On hover, the
rotateY(180deg)creates the flip effect. -
Neon Glow – Achieved with
box-shadowin cyan for a glowing edge.
Customization Tips
-
Change
#0ffto any color code for different neon colors. -
Adjust
transition: transform 1s;to make the flip faster or slower. -
Modify card size in
.cardclass to fit your design.
Where to Use This Effect
-
Portfolio websites for showcasing projects.
-
E-commerce product displays with front details & back descriptions.
-
Interactive business cards in a digital format.
-
Gaming or tech sites for a futuristic look.
