Cards - WebDevTales

UI CARDS

Total Cards
39

CSS
30

Tailwind
9

GSAP
0

110 CSS Cards

Insert a meaningful line to evaluate the headline.

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css">

<div class="profile-card">
<div class="profile-header">
    <h2 id='areeb-anwar'  id="boomdevs_5" id='areeb-anwar'  id="boomdevs_4"  >Areeb Anwar</h2>
    <p>Web Developer</p>
</div>
<div class="profile-picture">
    <img decoding="async" src="https://images.nightcafe.studio/jobs/A43uYGgS5Ouu1VcOnQ9X/A43uYGgS5Ouu1VcOnQ9X--0--gxm0v.jpg?tr=w-1600,c-at_max" alt="Profile Picture">
</div>
<div class="social-links">
    <a href="#" title="Twitter"><i class="fab fa-twitter"></i></a>
    <a href="#" title="LinkedIn"><i class="fab fa-linkedin"></i></a>
    <a href="#" title="GitHub"><i class="fab fa-github"></i></a>
    <a href="#" title="Instagram"><i class="fab fa-instagram"></i></a>
</div>
<div class="profile-footer">
    <button>Contact</button>
</div>
</div>

body {
    font-family: 'Arial', sans-serif;
    background-color: #f0f4f8;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.profile-card {
    background: #ffffff;
    width: 16rem;
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-align: center;
    transition: transform 0.3s;
}

.profile-card:hover {
    transform: translateY(-5px);
}

.profile-header {
    background: linear-gradient(135deg, #6a11cb, #2575fc);
    color: white;
    padding: 1.3rem;
}

.profile-header h2 {
    margin: 0;
    font-size: 1.5rem;
}

.profile-header p {
    margin: 5px;
    font-weight: 300;
    margin-bottom: 1.25rem;
}

.profile-picture {
    margin-top: -2rem;
    border-radius: 50%;
    border: 5px solid white;
    overflow: hidden;
    width: 6rem;
    height: 6rem;
    display: inline-block;
}

.profile-picture img {
    width: 100%;
    height: auto;
}

.social-links {
    margin: 1.25rem 0;
}

.social-links a {
    margin: 0 0.75rem;
    color: #6a11cb;
    text-decoration: none;
    font-size: 1.25rem;
    transition: color 0.3s;
}

.social-links a:hover {
    color: #2575fc;
}

.profile-footer {
    padding: 1rem;
    background: #f9f9f9;
    border-top: 1px solid #eaeaea;
}

.profile-footer button {
    background: #6a11cb;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}

.profile-footer button:hover {
    background: #2575fc;
}

     <!-- No js -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css">
<div class="neuromorphic-card">
    <div class="icon">
        <i class="fas fa-user-circle"></i> <!-- Icon in place of image -->
    </div>
    <div class="name">Areeb Anwar</div>
    <div class="title">UI/UX Designer</div>
    <div class="description">
        Areeb Anwar is a talented UI/UX designer.
    </div>
    <div class="social-icons">
        <a href="#" title="Twitter"><i class="fab fa-twitter"></i></a>
        <a href="#" title="LinkedIn"><i class="fab fa-linkedin"></i></a>
        <a href="#" title="GitHub"><i class="fab fa-github"></i></a>
        <a href="#" title="Instagram"><i class="fab fa-instagram"></i></a>
    </div>
    <button class="contact-button"><i class="fa-solid fa-phone"></i> Contact</button>
</div>

body {
    font-family: 'Arial', sans-serif;
    background-color: #e0e5ec;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.neuromorphic-card {
    background: #e0e5ec;
    border-radius: 20px;
    box-shadow: 8px 8px 15px rgba(255, 255, 255, 0.7),
        -8px -8px 15px rgba(255, 255, 255, 0.7),
        inset 8px 8px 15px rgba(255, 255, 255, 0.5),
        inset -8px -8px 15px rgba(255, 255, 255, 0.5);
    padding: 30px;
    /* Increased padding for more height */
    width: 170px;
    /* Increased height */
    text-align: center;
    transition: transform 0.3s;
}

.neuromorphic-card:hover {
    transform: translateY(-5px);
}

.description {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
}

.icon {
    font-size: 60px;
    /* Size of the icon */
    color: #6a11cb;
    /* Icon color */
    margin-bottom: 15px;
}

.name {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin: 10px 0;
}

.title {
    font-size: 16px;
    color: #666;
    margin-bottom: 15px;
}

.social-icons {
    display: flex;
    justify-content: center;
    margin: 10px 0;
}

.social-icons a {
    margin: 0 10px;
    color: #6a11cb;
    font-size: 20px;
    transition: color 0.3s;
}

.social-icons a:hover {
    color: #2575fc;
}

.contact-button {
    background: #6a11cb;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
    box-shadow: 4px 4px 8px rgba(255, 255, 255, 0.5),
        -4px -4px 8px rgba(255, 255, 255, 0.5);
}

.contact-button:hover {
    background: #2575fc;
}

     <!-- No js -->

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css">
<div class="card">
    <div class="card-content">
        <div class="card-title">Creative Card</div>
        <div class="card-description">Hover to see more details!</div>

    </div>
    <div class="card-hover-content">
        <h3 id='more-information'  id="boomdevs_10" id='more-information' id="boomdevs_8" >More Information</h3>
        <p>This card uses animations and patterns to create an engaging user experience.</p>
        <button class="card-button">Learn More <i class="fa-brands fa-readme"></i></button>
    </div>
</div>

body {
    font-family: 'Arial', sans-serif;
    background-color: #f0f4f8;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    overflow: hidden;
}

.card {
    position: relative;
    width: 15rem;
    /* Changed to rem */
    height: 22rem;
    /* Adjusted height */
    border-radius: 1rem;
    /* Changed to rem */
    overflow: hidden;
    box-shadow: 0 0.4rem 2rem rgba(0, 0, 0, 0.1);
    background: linear-gradient(135deg, #6a11cb, #2575fc);
    color: white;
    transition: transform 0.3s;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-0.8rem);
    }
}

@keyframes slideIn {
    from {
        transform: translate(-50%, 20px);
        opacity: 0;
    }

    to {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    /* Optional: subtle overlay */
    z-index: 1;
}

.card-content {
    position: relative;
    z-index: 2;
    transition: opacity 0.3s;
    /* Transition for opacity */
}

.card-title {
    font-size: 1.5rem;
    /* Changed to rem */
    margin: 0.5rem 0;
    /* Changed to rem */
}

.card-description {
    font-size: 1rem;
    /* Changed to rem */
    margin-bottom: 1rem;
    /* Changed to rem */
}

.card-button {
    background: #ffffff;
    color: #6a11cb;
    border: none;
    padding: 0.5rem 1rem;
    /* Changed to rem */
    border-radius: 0.5rem;
    /* Changed to rem */
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
    z-index: 2;
}

.card-button:hover {
    background: #6a11cb;
    color: white;
}

.card:hover {
    transform: scale(1.05);
}

.card-hover-content {
    position: absolute;
    top: 100%;
    /* Start below the card */
    left: 50%;
    transform: translate(-50%, 0);
    opacity: 0;
    color: #6a11cb;
    text-align: center;
    z-index: 2;
    transition: opacity 0.3s ease;
    /* Transition for opacity */
}

.card:hover .card-content {
    opacity: 0;
    /* Make original content disappear */
}

.card:hover .card-hover-content {
    color: white;
    top: 50%;
    /* Move to the center of the card */
    animation: slideIn 0.5s forwards;
    /* Apply slide-in animation */
    opacity: 1;
    /* Make it visible */
}

.card-hover-content h3 {
    font-size: 1.25rem;
    /* Changed to rem */
    margin: 0.5rem 0;
    /* Changed to rem */
}

.card-hover-content p {
    font-size: 1rem;
    /* Changed to rem */
}

     <!-- No js -->

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet" />

<div class="profile-card">
    <div class="profile-picture">
        <i class="fas fa-user-circle"></i>
    </div>
    <p class="profile-name">
        Areeb Anwar
        <span>Founder of WebDevTales</span>
        <span>Software Engineer</span>
    </p>
    <div class="social-links">
        <a href="#" class="social-link">
            <i class="fab fa-twitter"></i>
            <span class="tooltip">Twitter</span>
        </a>
        <a href="#" class="social-link">
            <i class="fab fa-facebook-f"></i>
            <span class="tooltip">Facebook</span>
        </a>
        <a href="#" class="social-link">
            <i class="fab fa-linkedin-in"></i>
            <span class="tooltip">LinkedIn</span>
        </a>
        <a href="#" class="social-link">
            <i class="fab fa-instagram"></i>
            <span class="tooltip">Instagram</span>
        </a>
    </div>
</div>

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
    overflow-x: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.profile-card {
    background: linear-gradient(135deg, #ff7e5f, #feb47b);
    width: 13rem;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    font-family: "Arial", sans-serif;
    color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.profile-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Profile Picture */
.profile-picture {
    font-size: 5rem;
    color: #fff;
    margin-bottom: 15px;
}

/* Profile Name */
.profile-name {
    margin: 0;
    font-weight: bold;
    font-size: 18px;
}

.profile-name span {
    display: block;
    font-weight: normal;
    font-size: 14px;
    opacity: 0.8;
    margin-top: 5px;
}

/* Social Links */
.social-links {
    margin-top: 65px;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.social-link {
    text-decoration: none;
    color: #fff;
    position: relative;
    font-size: 1.2rem;
    display: inline-block;
    transition: color 0.3s ease;
}

.social-link:hover {
    color: #000;
}

/* Tooltip */
.tooltip {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    color: #fff;
    padding: 4px 8px;
    font-size: 0.8rem;
    border-radius: 4px;
    opacity: 0;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.tooltip:before {
    content: "";
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #000 transparent;
}

.social-link:hover .tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(-5px);
}

     <!-- No js -->

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="animated-card">
    <span class="ripple"></span>
    <span class="ripple"></span>
    <span class="ripple"></span>
    <div class="text">HELLO</div>
</div>

body {
    display: flex;
    justify-content: center;
    align-items: center;

}

/* Card Base */
.animated-card {
    position: relative;
    width: 220px;
    height: 320px;
    background: linear-gradient(135deg, #efbb55, #2ad7f2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    font-weight: bold;
    color: #fff;
    border-radius: 15px;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover Effect - Scale and Shadow */
.animated-card:hover {
    transform: scale(1.1);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3);
}

/* Expanding Overlay */
.animated-card::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
}

.animated-card:hover::before {
    width: 300%;
    height: 300%;
}

/* Text Reveal */
.text {
    position: absolute;
    font-size: 30px;
    font-weight: bold;
    color: #fff;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.animated-card:hover .text {
    opacity: 1;
    transform: scale(1);
}

/* Ripple Effect */
.ripple {
    position: absolute;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: ripple-animation 1.5s infinite ease-in-out;
}

/* Ripple Animation */
@keyframes ripple-animation {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(50);
        opacity: 0;
    }
}

/* Multiple Ripples */
.ripple:nth-child(1) {
    animation-delay: 0s;
}

.ripple:nth-child(2) {
    animation-delay: 0.5s;
}

.ripple:nth-child(3) {
    animation-delay: 1s;
}

/* Fixing Hover State for Ripple */
.animated-card:hover .ripple {
    animation-play-state: running;
}

     <!-- No js -->

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css">
<div class="card">
    <div class="card-header">
        <div class="card-title">Minimalist Card</div>
        <i class="fas fa-star card-icon"></i>
    </div>
    <div class="card-content">
        This is a simple and elegant card design that focuses on clean lines and typography.
        Hover over the card to see the lift effect.
    </div>
    <div class="card-footer">
        <button class="card-button">Learn More</button>
    </div>
</div>

body {
    font-family: 'Arial', sans-serif;
    background-color: #e9ecef;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.card {
    position: relative;
    width: 12rem;
    /* Width in rem */
    height: 20rem;
    /* Height in rem */
    border-radius: 1rem;
    /* Rounded corners */
    overflow: hidden;
    box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.2);
    background: white;
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem;
    /* Padding in rem */
}

.card:hover {
    transform: translateY(-0.5rem);
    /* Lift effect */
    box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.3);
    /* Enhanced shadow on hover */
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-title {
    font-size: 1.5rem;
    /* Title size */
    color: #333;
}

.card-icon {
    font-size: 1.5rem;
    /* Icon size */
    color: #6a11cb;
    /* Icon color */
}

.card-content {
    margin: 1rem 0;
    /* Margin for content */
    font-size: 1rem;
    /* Content size */
    color: #666;
}

.card-footer {
    display: flex;
    justify-content: center;
}

.card-button {
    background: #6a11cb;
    /* Button background */
    color: white;
    /* Button text color */
    border: none;
    padding: 0.5rem 1rem;
    /* Button padding */
    border-radius: 0.5rem;
    /* Button rounded corners */
    cursor: pointer;
    transition: background 0.3s;
}

.card-button:hover {
    background: #2575fc;
    /* Button hover color */
}

     <!-- No js -->

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="card">
    <h1 id='i'  id="boomdevs_19" id='i' id="boomdevs_16" >I</h1>
    <i class="fas fa-heart icon"></i>
    <h2 id='you'  id="boomdevs_20" id='you' id="boomdevs_17" >YOU</h2>
</div>

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(135deg, #ffacfc, #68a3f8);
    background-size: 400% 400%;
    animation: gradientAnimation 10s ease infinite;
}

/* Card Styles */
.card {
    width: 13rem;
    height: 20rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 1rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

/* Hover Effect */
.card:hover {
    transform: scale(1.05) rotate(10deg);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* Text Styling */
h1,
h2 {
    color: #fff;
    text-align: center;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.7),
        0 0 10px rgba(255, 255, 255, 0.5),
        0 0 15px rgba(255, 255, 255, 0.3);
    margin: 0;
}

h1 {
    font-size: 3rem;
    animation: glowText 1.5s ease-in-out infinite alternate;
}

h2 {
    font-size: 1.5rem;
    margin-top: 10px;
    animation: glowText 1.5s ease-in-out infinite alternate;
    animation-delay: 0.5s;
}

/* Icon Styling */
.icon {
    font-size: 4rem;
    color: #ff758c;
    transition: transform 0.4s ease;
    animation: bounceIcon 2s ease-in-out infinite;
}

.card:hover .icon {
    transform: scale(1.2);
}

/* Text Glowing Animation */
@keyframes glowText {
    0% {
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.7),
            0 0 10px rgba(255, 255, 255, 0.5),
            0 0 15px rgba(255, 255, 255, 0.3);
    }

    100% {
        text-shadow: 0 0 15px rgba(255, 255, 255, 1),
            0 0 30px rgba(255, 255, 255, 0.8),
            0 0 50px rgba(255, 255, 255, 0.6);
    }
}

/* Icon Bounce Animation */
@keyframes bounceIcon {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

/* Gradient Animation */
@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

     <!-- No js -->

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="card-container">
    <div class="card">
        <p>Hover Me</p>
        <!-- Profile Image -->
        <div class="profile-image"></div>

        <!-- Social Icons -->
        <div class="social-icons">
            <a href="#" class="fab fa-facebook"></a>
            <a href="#" class="fab fa-twitter"></a>
            <a href="#" class="fab fa-instagram"></a>
        </div>
    </div>
</div>

body {
    font-family: Arial, sans-serif;
    background: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    overflow: hidden;
}

.card-container {
    perspective: 1500px;
}

.card {
    width: 300px;
    height: 400px;
    background: linear-gradient(45deg, #5c4b8b, #d12f6f);
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transform-style: preserve-3d;
    transition: all 0.3s ease;
}

.card:hover {
    transform: rotateY(15deg) rotateX(15deg);
}

.card p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 44px;
    font-weight: bold;
    text-align: center;
    text-shadow:
        0 0 5px rgba(255, 255, 255, 0.8),
        0 0 10px rgba(255, 255, 255, 0.6),
        0 0 15px rgba(255, 255, 255, 0.4),
        0 0 20px rgba(255, 255, 255, 0.2),
        0 0 30px rgba(255, 255, 255, 0.1);
    animation: shine 1.5s infinite linear;
}

/* Shining Effect Animation */
@keyframes shine {
    0% {
        text-shadow:
            0 0 5px rgba(255, 255, 255, 0.8),
            0 0 10px rgba(255, 255, 255, 0.6),
            0 0 15px rgba(255, 255, 255, 0.4),
            0 0 20px rgba(255, 255, 255, 0.2),
            0 0 30px rgba(255, 255, 255, 0.1);
    }

    50% {
        text-shadow:
            0 0 10px rgba(255, 255, 255, 1),
            0 0 20px rgba(255, 255, 255, 0.9),
            0 0 30px rgba(255, 255, 255, 0.8),
            0 0 40px rgba(255, 255, 255, 0.6),
            0 0 50px rgba(255, 255, 255, 0.4);
    }

    100% {
        text-shadow:
            0 0 5px rgba(255, 255, 255, 0.8),
            0 0 10px rgba(255, 255, 255, 0.6),
            0 0 15px rgba(255, 255, 255, 0.4),
            0 0 20px rgba(255, 255, 255, 0.2),
            0 0 30px rgba(255, 255, 255, 0.1);
    }
}

/* Explosion Effect */
.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('https://images.nightcafe.studio/jobs/sVv2oR9uCGpuMxjUhr1I/sVv2oR9uCGpuMxjUhr1I--1--6gycc.jpg?tr=w-1600,c-at_max');
    background-size: 20px 20px;
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card:hover::before {
    opacity: 1;
    animation: explode 1s forwards;
}

@keyframes explode {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(3);
    }

    100% {
        transform: scale(5);
        opacity: 0;
    }
}

/* Profile Image */
.profile-image {
    width: 100%;
    height: 100%;
    background: url('https://images.nightcafe.studio/jobs/sVv2oR9uCGpuMxjUhr1I/sVv2oR9uCGpuMxjUhr1I--1--6gycc.jpg?tr=w-1600,c-at_max') center/cover;
    border-radius: 10px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.card:hover .profile-image {
    opacity: 1;
    transform: scale(1);
}

/* Social Icons */
.social-icons {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    opacity: 1;
    transition: opacity 0.5s ease;
    z-index: 15;
}

.social-icons a {
    color: white;
    font-size: 24px;
    text-decoration: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.card:hover .social-icons a {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
}

.social-icons a:nth-child(2) {
    transition-delay: 0.2s;
}

.social-icons a:nth-child(3) {
    transition-delay: 0.3s;
}

/* Social Icon Hover Effects */
.social-icons a:hover {
    color: #ff758c;
}

     <!-- No js -->

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="card">
    <div class="title">Expand Me!</div>
    <div class="description">Hover to see the effect</div>
</div>

body {
    font-family: 'Arial', sans-serif;
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.card {
    width: 15rem;
    height: 19rem;
    background: #6a00f4;
    color: white;
    border-radius: 1rem;
    display: flex;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
    background-image: url('https://www.transparenttextures.com/patterns/diagmonds-light.png');
    background-size: cover;
    transition: all 0.3s ease-in-out;
}

.card:hover {
    width: 18rem;
    height: 22rem;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.3);
}

.title {
    font-size: 1.5rem;
    margin: 0.5rem;
}

.description {
    font-size: 1rem;
    opacity: 0.8;
}

     <!-- No js -->

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<div class="card">
    <div class="content">
        <i class="fa-brands fa-fly"></i>
        <h1 id='hover-to-reveal-more'  id="boomdevs_27" id='hover-to-reveal-more' id="boomdevs_26" >Hover to reveal more</h1>
    </div>
    <div class="hidden-content">
        <h2 id='hellow-world'  id="boomdevs_28" id='hellow-world' id="boomdevs_27" >Hellow World</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, mauris vel tincidunt malesuada, velit turpis tincidunt velit, ut tincidunt enim velit vel velit. Nullam euismod, mauris vel tincidunt malesuada, velit turpis tincidunt velit, ut tincidunt enim velit vel velit.</p>
    </div>
</div>
</div>

body {
    font-family: 'Arial', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(135deg, #1e1e1e, #3a3a3a);
    margin: 0;
}

.card {
    width: 18rem;
    height: 200px;
    background: #444;
    color: white;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}

.content {
    padding: 20px;
    font-size: 1.2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease;
}

h1 {
    font-size: 1.5rem;
    /* Size of the heading */
    margin: 10px 0;
    /* Space above and below the heading */
    color: #ffffff;
    /* Heading color */
}

.content i {
    font-size: 6rem;
    /* Size of the icon */
    color: #ffcc00;
    /* Icon color */
    margin-top: -1rem;
    /* Space above the icon */
    transition: transform 0.3s ease, color 0.3s ease, filter 0.3s ease;
    /* Smooth transition for hover effect */
    filter: drop-shadow(0 0 15px rgba(255, 204, 0, 0.8));
    /* Adds a glowing effect */
    animation: fadeInScale 1.5s ease-out forwards;
    /* Apply animation */
}

/* Keyframe animation */
@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-360deg);
        /* Starts off invisible and rotated */
    }

    50% {
        opacity: 0.5;
        transform: scale(1.1) rotate(0deg);
        /* Scales up and rotates to normal */
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        /* Final size and no rotation */
    }
}

.content i:hover {
    transform: scale(1.2) rotate(15deg);
    /* Slightly enlarges and rotates the icon on hover */
    color: #ff5733;
    /* Changes icon color on hover */
    filter: drop-shadow(0 0 25px rgba(255, 204, 0, 1));
    /* Enhanced glowing effect on hover */
}




.hidden-content {
    position: absolute;
    bottom: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: #666;
    color: white;
    text-align: center;
    transition: bottom 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    border-radius: 15px;
    /* Match the card's border radius */
}

.card:hover .hidden-content {
    bottom: 0;
    opacity: 1;
}

.card:hover .content {
    opacity: 0;
}

h2 {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 1.5rem;
    font-weight: bold;

}

p {
    margin-bottom: 10px;
    font-size: 0.9rem;
    margin-left: 10px;
    text-align: left;
    margin-right: 5px;
}

     <!-- No js -->

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="card">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 28 24" stroke-width="2" stroke="currentColor" class="icon">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 8c0-2.21-1.79-4-4-4s-4 1.79-4 4 1.79 4 4 4 4-1.79 4-4zm0 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm8-4c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z" />
    </svg>
    <h1 id='project-title'  id="boomdevs_31" id='project-title' id="boomdevs_29" >Project Title</h1>
    <p class="description">This is a brief description of the project. It highlights the main features and technologies used.</p>
    <button class="button">View Project</button>
</div>

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #f0f4f8;
    margin: 0;
}

.card {
    width: 15rem;
    /* Adjusted width for better layout */
    background: white;
    border-radius: 1rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    /* Center text and icon */
    overflow: hidden;
    /* Prevent overflow */
}

.card:hover {
    transform: translateY(-5px);
    /* Lift effect on hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    /* Enhanced shadow on hover */
}

.icon {
    width: 100px;
    /* Icon size */
    height: 100px;
    /* Icon size */
    margin-top: 20px;
    /* Space above the icon */
    color: #ffcc00;
    /* Icon color */
    font-size: 5rem;
    /* Icon font size */
    transition: transform 0.3s ease, color 0.3s ease, filter 0.3s ease;
    /* Smooth transition for hover effect */
    animation: bounceIn 1s ease-out;
    /* Bounce animation on load */

}

/* Hover effect */
.icon:hover {
    transform: scale(1.1) rotate(15deg);
    /* Scale up and rotate slightly */
    color: #ff5733;
    /* Change color on hover */
    filter: drop-shadow(0 0 25px rgba(255, 204, 0, 1));
    /* Glowing effect */
}

/* Keyframe animation: bounce effect when the icon loads */
@keyframes bounceIn {
    0% {
        transform: scale(0) rotate(-180deg);
        /* Start small and rotated */
        opacity: 0;
    }

    50% {
        transform: scale(1.1) rotate(45deg);
        /* Slightly bigger and rotated */
        opacity: 0.5;
    }

    100% {
        transform: scale(1) rotate(0deg);
        /* Final size and no rotation */
        opacity: 1;
    }
}

h1 {
    font-size: 1.5rem;
    /* Size of the heading */
    margin: 10px 0;
    /* Space above and below the heading */
    color: #333;
    /* Heading color */
}

.description {
    padding: 0 20px;
    /* Padding for description */
    font-size: 1rem;
    /* Font size for description */
    color: #666;
    /* Description color */
    margin: 10px 0;
    /* Space above and below the description */
}

.button {
    background: #ffcc00;
    /* Button background color */
    color: #444;
    /* Button text color */
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    /* Padding for button */
    font-size: 1rem;
    /* Font size for button */
    cursor: pointer;
    /* Pointer cursor on hover */
    transition: background 0.3s ease;
    /* Transition for button */
    margin-bottom: 20px;
    /* Space below the button */
}

.button:hover {
    background: #e6b800;
    /* Darker shade on hover */
}

     <!-- No js -->

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<div class="card">
    <i class="fas fa-heart icon"></i>
    <div>Gradient Borders!</div>
</div>

body {
    font-family: 'Arial', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(120deg, #ece8ec, #f0e9ea);
    margin: 0;
}

.card {
    width: 17rem;
    height: 12rem;
    position: relative;
    background: white;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    /* Change to column to stack icons and text */
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
}

.card::before,
.card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    background: linear-gradient(120deg, #f093fb, #f5576c, #4facfe, #00f2fe);
    z-index: -1;
    transition: transform 0.5s ease;
}

.card::before {
    filter: blur(0.5rem);
}

.card::after {
    filter: brightness(1.2);
    transform: scale(0.95);
}

.card:hover::after {
    transform: scale(1.1);
}

.card:hover {
    color: #f093fb;
}

.icon {
    font-size: 3rem;
    /* Size of the icons */
    color: #f5576c;
    /* Color of the icons */
    margin-bottom: 0.5rem;
    /* Space between icons and text */
    transition: color 0.3s ease;
    /* Transition for hover effect */
}

.card:hover .icon {
    color: #f093fb;
    /* Change color on hover */
}

     <!-- No js -->

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="card">
    Neon Glow Card
  </div>

body {
    font-family: 'Arial', sans-serif;
    background: radial-gradient(circle at center, #0d1b2a, #1b263b, #0d1b2a); /* Subtle light gradient for the background */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }

  .card {
    width: 20rem;
    height: 16rem;
    background: #1c1c28; /* Neutral dark background for the card */
    border-radius: 1rem;
    color: #ffffff;
    font-size: 1.6rem; /* Slightly larger font for better readability */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 150, 255, 0.6), 0 0 40px rgba(0, 255, 200, 0.4); /* Enhanced neon effect */
    transition: box-shadow 0.5s ease, transform 0.4s ease;
    text-transform: uppercase;
    letter-spacing: 1.5px;
  }

  /* Hover interaction for a richer glow */
  .card:hover {
    box-shadow: 0 0 30px rgba(0, 150, 255, 0.8), 0 0 60px rgba(0, 255, 200, 0.6);
    transform: scale(1.05); /* Slight scale on hover */
  }

  /* Glowing gradient background */
  .card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(0, 150, 255, 0.6), rgba(0, 255, 200, 0.6));
    z-index: -1;
    animation: glowEffect 6s infinite alternate ease-in-out;
    filter: blur(25px); /* Soft glow effect */
  }

  /* Glowing gradient animation */
  @keyframes glowEffect {
    0% {
      opacity: 0.8;
      transform: scale(1);
    }
    100% {
      opacity: 0.6;
      transform: scale(1.1); /* Slight expansion of glow */
    }
  }

  /* Subtle text style */
  .card span {
    font-size: 1.4rem;
    font-weight: 400;
    opacity: 0.8;
    color: #a3b9cc; /* Soft light blue for subtle elegance */
  }

     <!-- No js -->

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<div class="card">
  <h1 id='elegant-card'  id="boomdevs_38" id='elegant-card' id="boomdevs_40" id='elegant-card' id="boomdevs_37" >Elegant Card</h1>
  <p>Minimal yet stunning ✨</p>
</div>

body {
  font-family: 'Arial', sans-serif;
  background: linear-gradient(135deg, #1e1e1e, #3a3a3a);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

.card {
  width: 22rem;
  height: 14rem;
  background: rgba(255, 255, 255, 0.1);
  /* Frosted glass effect */
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  backdrop-filter: blur(15px);
  /* Creates the frosted glass effect */
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.5s ease, box-shadow 0.5s ease;
  color: white;
  text-align: center;
}

.card:hover {
  transform: scale(1.03) translateY(-10px);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
  animation: subtle-shift 3s infinite ease-in-out;
}

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.15));
  z-index: -1;
  opacity: 0.8;
}

h1 {
  font-size: 1.8rem;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

p {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 0.5rem;
}

/* Subtle gradient animation */
@keyframes subtle-shift {

  0%,
  100% {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.15));
  }

  50% {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0.4));
  }
}

     <!-- No js -->

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="card">
    <div class="card-inner">Front Side</div>
    <div class="card-back">Back Side</div>
</div>

body {
    font-family: 'Arial', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #121212;
    /* Dark background for neon effect */
    margin: 0;
    color: #fff;
}

.card {
    width: 18rem;
    height: 12rem;
    border-radius: 1rem;
    background: linear-gradient(45deg, #ff00ff, #00ffcc);
    /* Neon gradient */
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 1.5rem;
    position: relative;
    overflow: hidden;
    /* Ensures the back side is hidden until needed */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.3s ease;
}

.card:hover {
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

.card-inner,
.card-back {
    position: absolute;
    backface-visibility: hidden;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-weight: bold;
    text-align: center;
    padding: 1rem;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.6s ease, background-color 0.6s ease;
}

/* Front side with glowing neon effect */
.card-inner {
    background: linear-gradient(45deg, #00ffcc, #ff00ff);
    color: #fff;
}

/* Back side - initially hidden */
.card-back {
    transform: translateX(100%);
    /* Off-screen to the right */
    background: linear-gradient(45deg, #ff007f, #7f00ff);
    /* Neon purple background */
    color: #fff;
}

/* Slide effect to reveal the back */
.card:hover .card-back {
    transform: translateX(0);
    /* Slide in from the right */
}

/* On hover, change the background of both sides */
.card-inner:hover,
.card-back:hover {
    background: linear-gradient(45deg, #ffcc00, #ff00ff);
    color: #ffeb3b;
    /* Neon yellow text on hover */
}

/* Optional: Add glowing effect on hover */
.card-inner:hover,
.card-back:hover {
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.3), 0 0 20px rgba(255, 255, 255, 0.5);
}

/* Text effect */
.card-inner:hover span,
.card-back:hover span {
    font-size: 1.7rem;
    transition: font-size 0.3s ease;
}

.card-inner span,
.card-back span {
    text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 20px #ff00ff;
    /* Neon text glow */
}

     <!-- No js -->

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="card">
    <div class="text">Animated Text</div>
</div>

body {
    font-family: 'Arial', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(120deg, #c6ffdd, #fbd786, #f7797d);
    margin: 0;
}

.card {
    width: 19rem;
    height: 12rem;
    background: white;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.card:hover {
    transform: scale(1.05);
}

.text {
    font-size: 2.3rem;
    font-weight: bold;
    background: linear-gradient(90deg, #ff6a00, #ee0979, #4facfe, #00f2fe);
    background-size: 300% 100%;
    /* Set a larger background size for the animation */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-move 4s infinite linear;
}

@keyframes gradient-move {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}

     <!-- No js -->

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="card">
    Sliding Border Card
</div>

body {
    font-family: 'Arial', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #f0f4f8;
    margin: 0;
}

.card {
    width: 19rem;
    height: 12rem;
    background: white;
    border-radius: 1rem;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.card::before,
.card::after {
    content: '';
    position: absolute;
    height: 1.3rem;
    background: linear-gradient(90deg, #00f260, #0575e6);
    width: 100%;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
}

.card::before {
    top: 0;
}

.card::after {
    bottom: 0;
}

.card:hover::before,
.card:hover::after {
    transform: translateX(0);
}

     <!-- No js -->

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="card">
    <div class="card-inner front">
        <h2 id='ultra-pro-plan'  id="boomdevs_47" id='ultra-pro-plan' id="boomdevs_46" >Ultra Pro Plan</h2>
        <p>$49.99/month</p>
        <button style="padding: 0.5rem 1rem; border: none; border-radius: 0.5rem; background: #fff; color: #4caf50; font-weight: bold; cursor: pointer; transition: background 0.3s;">
            Get Started
        </button>
    </div>
    <div class="card-inner back">
        <h3 id='features'  id="boomdevs_48" id='features' id="boomdevs_47" >Features:</h3>
        <ul>
            <li>Unlimited Projects</li>
            <li>100 GB Storage</li>
            <li>24/7 Premium Support</li>
            <li>Advanced Analytics</li>
        </ul>
        <button>
            Sign Up
        </button>
    </div>
</div>

body {
    font-family: 'Arial', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background: linear-gradient(135deg, #ff7e5f, #feb47b);
}

.card {
    width: 19rem;
    height: 15rem;
    background: #fff;
    border-radius: 1.5rem;
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.2);
    perspective: 1000px;
    position: relative;
    transition: transform 0.6s ease, box-shadow 0.3s ease;
    overflow: hidden;
    animation: fadeIn 1s ease forwards;
}

.card-inner {
    position: absolute;
    inset: 0;
    border-radius: 1.5rem;
    backface-visibility: hidden;
    /* Hide the back face when not facing the viewer */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1rem;
    transition: transform 0.6s ease;
    /* Smooth transition for the inner card */
}

.card:hover .card-inner.front {
    transform: rotateY(180deg);
    /* Rotate the front face */
}

.card:hover .card-inner.back {
    transform: rotateY(0deg);
    /* Show the back face */
}

.front {
    background: linear-gradient(135deg, #4caf50, #81c784);
    color: white;
}

.back {
    transform: rotateY(180deg);
    /* Rotate the back face */
    background: linear-gradient(135deg, #ff9800, #ffc107);
    color: #333;
}

h2 {
    margin: 0.5rem 0;
    font-size: 2rem;
}

p {
    font-size: 1.5rem;
    margin: 0.5rem 0;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

li {
    margin: 0.5rem 0;
    font-size: 1.1rem;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

button {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 0.5rem;
    background: #fff;
    color: #ff9800;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
}

button:hover {
    background: #4caf50;
    color: #fff;
}

     <!-- No js -->

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<div class="card">
    <h2 id='areeb-anwar-1'  id="boomdevs_51" id='areeb-anwar-1' id="boomdevs_49" >Areeb Anwar</h2>
    <p>Web Developer</p>
    <div class="icons">
        <a href="#"><i class="fab fa-github icon"></i></a>
        <a href="#"><i class="fab fa-linkedin-in icon"></i></a>
        <a href="#"><i class="fab fa-twitter icon"></i></a>
        <a href="#"><i class="fab fa-instagram icon"></i></a>
    </div>
</div>

body {
    font-family: 'Arial', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    background: #f4f4f4;
}

.card {
    width: 19rem;
    height: 10rem;
    background: linear-gradient(135deg, #ff4e50, #f9d423);
    border-radius: 1rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    transition: transform 0.4s ease, box-shadow 0.4s ease, border 0.4s ease;
}

.card:hover {
    transform: scale(1.1) rotate(3deg);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.4);
    border: 3px solid white;
}

.card h2 {
    margin: 0.5rem;
}

.icons i {
    font-size: 1.5rem;
    margin: 0.3rem;
    color: white;
    transition: color 0.4s ease, transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.icons i:hover {
    position: relative;
    transform: translate(-50%, -50%);
    /* Center the icon */
    border-radius: 50%;
}

.fa-github:hover {
    color: #333;
    /* GitHub brand color */
}

.fa-linkedin-in:hover {
    color: #0077b5;
    /* LinkedIn brand color */
}

.fa-twitter:hover {
    color: #1da1f2;
    /* Twitter brand color */
}

.fa-instagram:hover {
    color: #e1306c;
    /* Instagram brand color */
}

     <!-- No js -->

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<div class="animated-border-card">
    <div class="card-content">
        <h2 id='pro-card'  id="boomdevs_54" id='pro-card' id="boomdevs_53" >Pro Card</h2>
        <p>This card features subtle moving borders and a sleek design.</p>
        <div class="icons">
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
        </div>
    </div>
</div>

:root {
    --card-width: 19rem;
    --card-height: 12rem;
    --border-thickness: 0.3rem;
    --border-speed: 3s;
    --border-color: white;
    --card-bg: #94092b;
    --text-color: #fff;
}

/* Body Styling (Centering the Card) */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background: #d8d8dc;
    font-family: 'Arial', sans-serif;
}

/* Card Container */
.animated-border-card {
    position: relative;
    width: var(--card-width);
    height: var(--card-height);
    background: black;
    color: var(--text-color);
    overflow: hidden;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease-in-out;
}

.animated-border-card:hover {
    transform: scale(1.05);
}

/* Moving Border Effect */
.animated-border-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: var(--border-thickness) solid var(--border-color);
    border-radius: 1rem;
    box-sizing: border-box;
    animation: moveBorders var(--border-speed) linear infinite;
}

/* Content inside the card */
.animated-border-card .card-content {
    position: relative;
    z-index: 1;
    padding: 1rem;
}

.animated-border-card h2 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.animated-border-card p {
    font-size: 1rem;
    opacity: 0.8;
    line-height: 1.5;
}

.card-content .icons {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    transition: color 0.3s ease-in-out;
}



.card-content .icons i:hover {
    color: #00e7f7;
    transform: scale(1.2);
}

/* Keyframe for the Border Movement */
@keyframes moveBorders {
    0% {
        clip-path: inset(0 0 90% 0);
    }

    25% {
        clip-path: inset(0 90% 0 0);
    }

    50% {
        clip-path: inset(90% 0 0 0);
    }

    75% {
        clip-path: inset(0 0 0 90%);
    }

    100% {
        clip-path: inset(0 0 90% 0);
    }
}

     <!-- No js -->

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<div class="card">
    <h1 id='hover-me'  id="boomdevs_57" id='hover-me' id="boomdevs_55" >Hover Me</h1>
    <div class="title">
        <h2 id='sliding-title'  id="boomdevs_58" id='sliding-title' id="boomdevs_56" >Sliding Title</h2>
        <div class="icons">
            <i class="fas fa-angle-left"></i>
            <i class="fas fa-angle-right"></i>
            <i class="fas fa-times"></i>
            <i class="fas fa-trash-alt"></i>
            <i class="fas fa-pencil-alt"></i>
        </div>
    </div>
</div>

body {
    font-family: 'Arial', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background: #ececec;
}

.card {
    width: 19rem;
    height: 12rem;
    background: linear-gradient(135deg, #8e44ad, #3498db);
    border-radius: 1rem;
    overflow: hidden;
    position: relative;
    color: white;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
}

.title {
    position: absolute;
    top: 50%;
    left: -100%;
    transform: translateY(-50%);
    width: 100%;
    transition: left 0.4s ease;
}

.card:hover .title {
    left: 0;
}

.card h1 {
    color: white;
}

.card:hover h1 {
    transform: translateY(-50%) translateX(100%);
    display: none;
}

.icons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    /* Space between icons */
    margin-top: 1rem;
    /* Space above the icons */
}

.icons i {
    font-size: 1.5rem;
    /* Increase icon size */
    transition: transform 0.3s ease, color 0.3s ease;
    /* Smooth transition for hover effects */
    cursor: pointer;
    /* Change cursor to pointer on hover */
}

.icons i:hover {
    transform: scale(1.2);
    /* Scale up the icon on hover */
    color: #f39c12;
    /* Change color on hover */
}

/* Optional: Add a background and border radius for the icons */
.icons i {
    padding: 0.5rem;
    /* Add padding around icons */
    border-radius: 0.5rem;
    /* Rounded corners */
    background: rgba(255, 255, 255, 0.1);
    /* Slightly transparent background */
}

.icons i:hover {
    background: rgba(255, 255, 255, 0.2);
    /* Change background on hover */
}

     <!-- No js -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<div class="card">
    <img decoding="async" src="https://images.nightcafe.studio/jobs/TUSj3kxsxGifvmvqxp3J/TUSj3kxsxGifvmvqxp3J--0--2hzmy.jpg?tr=w-1600,c-at_max" alt="Profile Picture" class="profile-pic">
    <div class="name">John Doe</div>
    <div class="description">Web Developer | Tech Enthusiast | Blogger</div>
    <div class="social-icons">
        <div class="icon-container">
            <div class="icon" onclick="createRipple(event)">
                <i class="fab fa-facebook-f"></i>
                <span class="tooltip">Facebook</span>
            </div>
        </div>
        <div class="icon-container">
            <div class="icon" onclick="createRipple(event)">
                <i class="fab fa-twitter"></i>
                <span class="tooltip">Twitter</span>
            </div>
        </div>
        <div class="icon-container">
            <div class="icon" onclick="createRipple(event)">
                <i class="fab fa-linkedin-in"></i>
                <span class="tooltip">LinkedIn</span>
            </div>
        </div>
        <div class="icon-container">
            <div class="icon" onclick="createRipple(event)">
                <i class="fab fa-github"></i>
                <span class="tooltip">GitHub</span>
            </div>
        </div>
    </div>
    <p style="color: #d5d3d3;">Click Icons</p>
</div>

body {
  font-family: 'Arial', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: #d6d9da;
}

.card {
  width: 15rem;
  background: linear-gradient(135deg, #ff6a00, #ee0979, #ff512f);
  border-radius: 1rem;
  position: relative;
  overflow: hidden;
  color: white;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  padding: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* Add transition for hover effects */
}

.card:hover {
  transform: scale(1.05);
  /* Scale up the card on hover */
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.7);
  /* Increase shadow on hover */
}

.profile-pic {
  width: 100px;
  height: 100px;
  border-radius: 10%;
  margin: 0 auto;
  border: 4px solid white;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* Add transition for hover effects */
}

.profile-pic:hover {
  transform: scale(1.1);
  /* Scale up the profile picture on hover */
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
  /* Add a glowing effect on hover */
}

.name {
  font-size: 1.5rem;
  margin: 10px 0;
}

.description {
  font-size: 1rem;
  margin-bottom: 20px;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.icon {
  font-size: 1.5rem;
  position: relative;
  cursor: pointer;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  transform: scale(0);
  animation: ripple-animation 0.6s linear;
  pointer-events: none;
}

@keyframes ripple-animation {
  to {
      transform: scale(4);
      opacity: 0;
  }
}

/* Ultra professional CSS for icons and tooltips */
.icons {
  display: flex;
  justify-content: center;
  gap: 2rem;
  /* Space between icons */
  margin-top: 1rem;
  /* Space above the icons */
}

.icon-container {
  position: relative;
  /* Positioning for tooltip */
}

.icons i {
  font-size: 2rem;
  /* Increase icon size */
  transition: transform 0.3s ease, color 0.3s ease;
  /* Smooth transition for hover effects */
  cursor: pointer;
  /* Change cursor to pointer on hover */
}

.icons i:hover {
  transform: scale(1.2);
  /* Scale up the icon on hover */
}

/* Tooltip styles */
.tooltip {
  visibility: hidden;
  /* Hidden by default */
  background-color: transparent;
  /* Background will be set in each tooltip */
  color: #fff;
  /* Text color */
  text-align: center;
  /* Center the text */
  border-radius: 5px;
  /* Rounded corners */
  padding: 5px;
  /* Padding around text */
  font-size: 1rem !important;
  position: absolute;
  /* Positioning */
  z-index: 1;
  /* Ensure it appears above other elements */
  bottom: 125%;
  /* Position above the icon */
  left: 50%;
  /* Center horizontally */
  margin-left: -50%;
  /* Adjust for centering */
  opacity: 0;
  /* Hidden by default */
  transition: opacity 0.3s ease;
  /* Smooth transition for opacity */
}

/* Show tooltip on hover */
.icon-container:hover .tooltip {
  visibility: visible;
  /* Show tooltip */
  opacity: 1;
  /* Fade in */
}

/* Tooltip colors for each icon */
.icon-container:nth-child(1) .tooltip {
  background-color: #3b5998;
  /* Facebook blue */
}

.icon-container:nth-child(2) .tooltip {
  background-color: #1da1f2;
  /* Twitter blue */
}

.icon-container:nth-child(3) .tooltip {
  background-color: #0077b5;
  /* LinkedIn blue */
}

.icon-container:nth-child(4) .tooltip {
  background-color: #333;
  /* GitHub black */
}

     <!-- No js -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="card dotted-card">
  <div class="card-content">
      <h2 id='webdevtales'  id="boomdevs_63" id='webdevtales' id="boomdevs_61" >WebDevTales</h2>
      <p>A community for web developers to share their knowledge and experiences.</p>
  </div>
</div>

:root {
  --card-width: 20rem;
  --card-height: 12rem;
  --border-speed: 4s;
  --border-color: #00b3b3;
  --background: #3a3d46;
  --light-color: #ffffff;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --light-shadow: rgba(255, 255, 255, 0.3);
}

/* Body Styling */
body {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  align-items: center;
  margin: 0;
  background: #f4f4f7;
  font-family: 'Arial', sans-serif;
}

/* Card Base Styling with Neomorphism Effect */
.card {
  position: relative;
  width: var(--card-width);
  height: var(--card-height);
  background: var(--background);
  color: rgb(0, 0, 0);
  border-radius: 1rem;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 1rem;
  box-shadow: 10px 10px 20px var(--shadow-color), -10px -10px 20px var(--light-shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  backdrop-filter: blur(10px);
  /* Neomorphism soft blur effect */
  background: var(--light-color);
  /* Light card body color */
}

/* Hover Effect */
.card:hover {
  transform: scale(1.05);
  /* Scale up the card on hover */
  box-shadow: 15px 15px 30px var(--shadow-color), -15px -15px 30px var(--light-shadow);
}

/* Dotted Moving Borders with More Prominent Dots */
.dotted-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0.3rem dotted var(--border-color);
  /* Clearer dotted border */
  border-radius: 1rem;
  box-sizing: border-box;
  animation: moveDottedBorders var(--border-speed) linear infinite;
}

/* Keyframes for Dotted Border Animation */
@keyframes moveDottedBorders {
  0% {
      transform: translate(0, 0);
  }

  50% {
      transform: translate(0.5rem, 0.5rem);
  }

  100% {
      transform: translate(0, 0);
  }
}

/* Content Inside the Card */
.card-content {
  position: relative;
  z-index: 1;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Title Styling with Text Glow */
.card-content h2 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  animation: text-glow 3s ease-in-out infinite;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.7), 0 0 20px rgba(255, 255, 255, 0.5);
}

/* Paragraph Styling with Text Fade */
.card-content p {
  font-size: 1rem;
  opacity: 0.8;
  line-height: 1.5;
  color: #ddd;
  animation: text-fade 4s ease-in-out infinite;
}

/* Text Glow Animation */
@keyframes text-glow {

  0%,
  100% {
      text-shadow: 0 0 10px rgba(255, 255, 255, 0.7), 0 0 20px rgba(255, 255, 255, 0.5);
  }

  50% {
      text-shadow: 0 0 20px rgba(0, 255, 255, 1), 0 0 40px rgba(0, 255, 255, 0.7);
  }
}

/* Text Fade Animation */
@keyframes text-fade {

  0%,
  100% {
      opacity: 0.8;
  }

  50% {
      opacity: 1;
  }
}

     <!-- No js -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="price-card">
  <div class="card-content">
      <h2 id='premium-plan'  id="boomdevs_66" id='premium-plan' id="boomdevs_63" >Premium Plan</h2>
      <p>Unlock the best features for your business</p>
      <div class="price">$49.99/month</div>
  </div>
</div>

:root {
  --card-width: 20rem;
  --card-height: 14rem;
  --border-speed: 4s;
  --border-color: #00b3b3;
  --background-color: #3f4146;
  --price-color: #f1c40f;
  --text-color: #ffffff;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #f2f2f2;
  margin: 0;
  font-family: 'Arial', sans-serif;
}

.price-card {
  position: relative;
  width: var(--card-width);
  height: var(--card-height);
  background: var(--background-color);
  color: var(--text-color);
  border-radius: 1rem;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.price-card:hover {
  transform: scale(1.05);
}

.price-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0.6rem solid var(--border-color);
  border-radius: 1rem;
  box-sizing: border-box;
  animation: change-border 12s infinite alternate;
}

.card-content {
  position: relative;
  z-index: 1;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.card-content h2 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  font-weight: bold;
  text-transform: uppercase;
}

.card-content p {
  font-size: 1.1rem;
  opacity: 0.8;
  margin-bottom: 1rem;
}

.price {
  font-size: 2.2rem;
  color: var(--price-color);
  font-weight: bold;
  margin-top: 0.5rem;
}

/* Border animation for changing styles */
@keyframes change-border {
  0% {
      border-style: solid;
      border-color: #37ffff;
  }

  15% {
      border-style: dotted;
      border-color: #ffad2a;
  }

  30% {
      border-style: dashed;
      border-color: #ff5946;
  }

  45% {
      border-style: inset;
      border-color: #b700ff;
  }

  60% {
      border-style: ridge;
      border-color: #0099ff;
  }

  75% {
      border-style: outset;
      border-color: #00ff6a;
  }

  90% {
      border-style: groove;
      border-color: #ffcc00;
  }

  100% {
      border-style: solid;
      border-color: #00ffff;
  }
}

     <!-- No js -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="zigzag-card">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
      <path d="M0,0 L100,10 L00,100 L0,100 Z" fill="none" stroke="var(--svg-color)" stroke-width="150" stroke-dasharray="5 5" stroke-linejoin="round">
          <animate attributeName="stroke-dashoffset" from="0" to="10" dur="2s" repeatCount="indefinite" />
      </path>
  </svg>
  <div class="card-content">
      <h2 id='welcome-to-webdevtales'  id="boomdevs_69" id='welcome-to-webdevtales' id="boomdevs_65" >Welcome to WebDevTales</h2>
      <button>Learn More</button>
  </div>
</div>

:root {
  --card-width: 19rem;
  --card-height: 12rem;
  --svg-color: #74eddb;
  --background: linear-gradient(to bottom, #f7d392, #f7c77f, #f7b96b, #f7aa56, #f79a40, #f7892a, #f77714, #f76400, #f75000, #f73c00, #f72800, #f71400, #f70000);
  ;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  background: #dedee0;
  font-family: 'Arial', sans-serif;
}

.zigzag-card {
  position: relative;
  width: var(--card-width);
  height: var(--card-height);
  background: var(--background);
  color: white;
  overflow: hidden;
  border-radius: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 1rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
}

/* Zigzag Border using SVG */
.zigzag-card svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.card-content {
  position: relative;
  z-index: 1;
  padding: 1rem;
}

.card-content h2 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.card-content p {
  font-size: 1rem;
  opacity: 0.8;
  line-height: 1.5;
}

button {
  background: transparent;
  /* Gradient background */
  color: white;
  /* Text color */
  border: none;
  /* No border */
  border: 2px solid white;
  /* White border */
  border-radius: 50px;
  /* Rounded corners */
  padding: 12px 20px;
  /* Padding for the button */
  font-size: 0.9rem;
  /* Font size */
  font-weight: bold;
  /* Bold text */
  text-transform: uppercase;
  /* Uppercase text */
  cursor: pointer;
  /* Pointer cursor on hover */
  transition: all 0.3s ease;
  /* Smooth transition for hover effects */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  /* Shadow effect */
  outline: none;
  /* Remove outline */
}

button:hover {
  background: linear-gradient(135deg, #ee0979, #ff6a00);
  /* Reverse gradient on hover */
  transform: translateY(-3px);
  /* Slightly lift the button */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  /* Increase shadow on hover */
}

button:active {
  transform: translateY(1px);
  /* Press down effect */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  /* Reset shadow */
}

     <!-- No js -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="double-border-card">
    <div class="card-content">
        <div class="icons">
            <i class="fa fa-code"></i>
            <i class="fa fa-paint-brush"></i>
            <i class="fa-brands fa-square-js"></i>
            <i class="fa fa-database"></i>
        </div>
    </div>
</div>

:root {
  --card-width: 19rem;
  --card-height: 12rem;
  --outer-border-color: #f39c12;
  /* Vibrant Yellow-Orange */
  --inner-border-color: #3498db;
  /* Cool Blue */
  --border-speed: 4s;
  --background-color: #000000;
  /* Deep Blue-Grey */
  --text-color: #ecf0f1;
  /* Light White-Grey */
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  background: linear-gradient(135deg, #c6c7c8, #dbe2e9);
  /* Professional Gradient Background */
  font-family: 'Arial', sans-serif;
}

.double-border-card {
  position: relative;
  width: var(--card-width);
  height: var(--card-height);
  background: var(--background-color);
  color: var(--text-color);
  border-radius: 1.5rem;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 1rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
}

/* Outer Border Animation */
.double-border-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 1.5rem;
  border: 0.3rem solid var(--outer-border-color);
  animation: moveOuterBorder var(--border-speed) linear infinite;
  box-sizing: border-box;
}

/* Inner Border Animation */
.double-border-card::after {
  content: '';
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  width: calc(100% - 1.6rem);
  height: calc(100% - 1.6rem);
  border-radius: 1rem;
  border: 0.3rem solid var(--inner-border-color);
  animation: moveInnerBorder var(--border-speed) linear infinite;
  box-sizing: border-box;
}

/* Outer Border Animation */
@keyframes moveOuterBorder {
  0% {
      transform: translate(0, 0);
  }

  50% {
      transform: translate(0.5rem, 0.5rem);
  }

  100% {
      transform: translate(0, 0);
  }
}

/* Inner Border Animation */
@keyframes moveInnerBorder {
  0% {
      transform: translate(0, 0);
  }

  50% {
      transform: translate(-0.5rem, -0.5rem);
  }

  100% {
      transform: translate(0, 0);
  }
}

.card-content {
  position: relative;
  z-index: 1;
  padding: 1.5rem;
}

.icons {
  display: flex;
  /* Use flexbox for alignment */
  justify-content: center;
  /* Center the icons */
  gap: 30px
      /* Space between icons */
}

.icons i {
  font-size: 1.5rem;
  /* Increase icon size */
  color: #09d5f5;
  /* Default icon color */
  transition: transform 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  /* Smooth transition for hover effects */
  cursor: pointer;
  /* Pointer cursor on hover */
  padding: 20px;
  /* Padding around icons */
  border-radius: 50%;
  /* Circular background */
  background: rgba(52, 73, 94, 0.1);
  /* Light background for icons */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  /* Shadow effect */
  position: relative;
  /* Position for pseudo-elements */
}

.icons i::before {
  position: absolute;
  top: 10%;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  /* Circular background */
  background: rgba(52, 73, 94, 0.2);
  /* Light background */
}

.icons i:hover {
  transform: scale(1.2);
  /* Scale up the icon on hover */
  color: #e74c3c;
  /* Change color on hover */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  /* Increase shadow on hover */
}

     <!-- No js -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="svg-pattern-card">
    <div class="card-body">
        <div class="card-content">
            <i class="fas fa-bolt"></i>
            <h2 id='svg-pattern-card'  id="boomdevs_74" id='svg-pattern-card' id="boomdevs_68" >SVG Pattern Card</h2>
            <p>A card with a dynamic SVG background and gradient moving border. Perfect for modern UI designs.</p>
        </div>
    </div>
</div>

:root {
  --card-width: 22rem;
  --card-height: 15rem;
  --border-speed: 6s;
  --gradient-1: #ff6f61;
  /* Soft Red */
  --gradient-2: #36d1dc;
  /* Aqua Blue */
  --gradient-3: #f7ff00;
  /* Bright Yellow */
  --text-color: #2c3e50;
  /* Dark Blue */
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  background: #808182;
  /* Dark Grey Background */
  font-family: 'Arial', sans-serif;
}

.svg-pattern-card {
  position: relative;
  width: var(--card-width);
  height: var(--card-height);
  border-radius: 1.5rem;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
  color: var(--text-color);
  cursor: pointer;
}

/* Moving Gradient Border */
.svg-pattern-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 1.5rem;
  padding: 0.3rem;
  background: linear-gradient(120deg,
          var(--gradient-1),
          var(--gradient-2),
          var(--gradient-3));
  background-size: 200% 200%;
  animation: borderGradientMove var(--border-speed) linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 1;
}

@keyframes borderGradientMove {
  0% {
      background-position: 0% 50%;
  }

  50% {
      background-position: 100% 50%;
  }

  100% {
      background-position: 0% 50%;
  }
}

/* Moving SVG Background */
.card-body {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  padding: 1rem;
  background: url('data:image/svg+xml;utf8, \
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"> \
      <circle cx="50" cy="50" r="40" fill="%23ff6f61" /> \
      <rect x="100" y="100" width="50" height="50" fill="%2336d1dc" /> \
      <polygon points="150,10 190,80 110,80" fill="%23f7ff00" /> \
    </svg>');

  background-size: 150%;
  background-repeat: no-repeat;
  animation: patternMove 10s infinite linear;
}

@keyframes patternMove {
  0% {
      background-position: 0% 0%;
  }

  50% {
      background-position: 50% 50%;
  }

  100% {
      background-position: 0% 0%;
  }
}

.card-content {
  position: relative;
  z-index: 3;
  padding: 1rem;
}

.card-content h2 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.card-content p {
  font-size: 1rem;
  opacity: 0.9;
  line-height: 1.6;
}

.card-content i {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: var(--gradient-2);
}

     <!-- No js -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" />

<div class="svg-pattern-card">
    <div class="card-body">
        <div class="card-content">
            <i class="fas fa-cogs"></i>
            <h2 id='svg-pattern-card-1'  id="boomdevs_77" id='svg-pattern-card-1' id="boomdevs_70" >SVG Pattern Card</h2>
            <p>Explore creative patterns with dynamic borders and animations.</p>
        </div>
    </div>
</div>

:root {
  --card-width: 20.2rem;
  --card-height: 15rem;
  --border-speed: 6s;
  --gradient-1: #8e44ad;
  /* Purple */
  --gradient-2: #3498db;
  /* Blue */
  --gradient-3: #f39c12;
  /* Yellow */
  --text-color: #fff;
  /* Text Color */
  --svg-pattern-bg: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><circle cx="50" cy="50" r="40" fill="%238e44ad"/><rect x="100" y="100" width="50" height="50" fill="%233498db"/><polygon points="150,10 190,80 110,80" fill="%23f39c12"/></svg>';
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  background: #dcdde1;
  /* Light Gray Background */
  font-family: 'Arial', sans-serif;
}

.svg-pattern-card {
  position: relative;
  width: var(--card-width);
  height: var(--card-height);
  border-radius: 1.5rem;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

/* Moving Gradient Border */
.svg-pattern-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 1.5rem;
  padding: 0.3rem;
  background: linear-gradient(120deg, var(--gradient-1), var(--gradient-2), var(--gradient-3));
  background-size: 200% 200%;
  animation: borderGradientMove var(--border-speed) linear infinite;
  z-index: 1;
}

.svg-pattern-card:hover {
  box-shadow: 0 1rem 2rem rgba(24, 246, 205, 0.5);
  transform: scale(1.05) rotate(10deg) translateY(-0.5rem);
}

@keyframes borderGradientMove {
  0% {
      background-position: 0% 50%;
  }

  50% {
      background-position: 100% 50%;
  }

  100% {
      background-position: 0% 50%;
  }
}

.card-body {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  padding: 1rem;
  background: var(--svg-pattern-bg);
  background-size: 150%;
  background-repeat: no-repeat;
  animation: patternMove 8s infinite linear;
}

@keyframes patternMove {
  0% {
      background-position: 0% 0%;
  }

  50% {
      background-position: 50% 50%;
  }

  100% {
      background-position: 0% 0%;
  }
}

.card-content {
  position: relative;
  z-index: 3;
  padding: 1rem;
}

.card-content h2 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.card-content p {
  font-size: 1rem;
  opacity: 0.9;
  line-height: 1.6;
}

.card-content i {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: var(--gradient-2);
}

     <!-- No js -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<div class="animated-border-card">
    <div class="card-content">
        <h2 id='modern-card'  id="boomdevs_80" id='modern-card' id="boomdevs_72" >Modern Card</h2>
        <p>Subtle animations, vibrant colors, and engaging icons.</p>
        <div class="icons">
            <i class="fas fa-heart"></i>
            <i class="fas fa-music"></i>
            <i class="fas fa-camera"></i>
            <i class="fas fa-leaf"></i>
        </div>
    </div>
</div>

:root {
  --card-width: 20rem;
  --card-height: 13rem;
  --border-thickness: 0.4rem;
  --border-speed: 4s;
  --border-color: #fffa65;
  --card-bg: linear-gradient(135deg, #2b2e4a, #5c5470);
  --text-color: #fff;
  --icon-hover-color: #ffa502;
  --icon-base-color: #fffa65;
  --icon-hover-scale: 1.3;
  --icon-spacing: 0.7rem;
}

/* Body Styling */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  background: linear-gradient(120deg, #1e3c72, #2a5298);
  font-family: 'Arial', sans-serif;
  overflow: hidden;
}

/* Card Container */
.animated-border-card {
  position: relative;
  width: var(--card-width);
  height: var(--card-height);
  background: var(--card-bg);
  color: var(--text-color);
  overflow: hidden;
  border-radius: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 0.7rem 1.5rem rgba(0, 0, 0, 0.4);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, height 0.3s ease-in-out;
}

.animated-border-card:hover {
  transform: scale(1.05);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.5);
  height: 23rem;
}

/* Moving Border Effect */
.animated-border-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: var(--border-thickness) solid var(--border-color);
  border-radius: 1rem;
  box-sizing: border-box;
  animation: moveBorders var(--border-speed) ease infinite;
}

/* Content Styling */
.animated-border-card .card-content {
  position: relative;
  z-index: 1;
  padding: 1rem;
}

.animated-border-card h2 {
  font-size: 1.8rem;
  margin-bottom: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #e6e6fa;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}

.animated-border-card p {
  font-size: 1rem;
  opacity: 0.85;
  line-height: 1.5;
  color: #dcdde1;
  margin-bottom: 1rem;
}

/* Icon Styling */
.card-content .icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--icon-spacing);
  margin-top: 1rem;
}

.card-content .icons i {
  font-size: 1.8rem;
  color: var(--icon-base-color);
  cursor: pointer;
  transition: color 0.3s ease, transform 0.3s ease;
}

.card-content .icons i:hover {
  color: var(--icon-hover-color);
  transform: scale(var(--icon-hover-scale));
}

/* Keyframe for Smooth Border Movement */
@keyframes moveBorders {
  0% {
      clip-path: inset(0 0 90% 0);
      /* Top border moving */
  }

  12.5% {
      clip-path: inset(0 90% 90% 0);
      /* Corner smoothing */
  }

  25% {
      clip-path: inset(0 90% 0 0);
      /* Right border moving */
  }

  37.5% {
      clip-path: inset(90% 90% 0 0);
      /* Corner smoothing */
  }

  50% {
      clip-path: inset(90% 0 0 0);
      /* Bottom border moving */
  }

  62.5% {
      clip-path: inset(90% 0 0 90%);
      /* Corner smoothing */
  }

  75% {
      clip-path: inset(0 0 0 90%);
      /* Left border moving */
  }

  87.5% {
      clip-path: inset(0 0 90% 90%);
      /* Corner smoothing */
  }

  100% {
      clip-path: inset(0 0 90% 0);
      /* Back to Top border moving */
  }
}

     <!-- No js -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="wave-pattern-card">
    <div class="card-body">
        <div class="card-content">
            <i class="fas fa-water"></i>
            <h2 id='wave-pattern-card'  id="boomdevs_83" id='wave-pattern-card' id="boomdevs_74" >Wave Pattern Card</h2>
            <p>This card features a dynamic SVG wave background and a gradient diagonal border for a sleek, modern look.</p>
        </div>
    </div>
</div>

:root {
  --card-width: 19rem;
  --card-height: 12rem;
  --border-speed: 8s;
  --gradient-1: #ff4e50;
  /* Fiery Red */
  --gradient-2: #1a2980;
  /* Deep Blue */
  --gradient-3: #26d0ce;
  /* Aqua Turquoise */
  --text-color: #1b1b1b;
  /* Charcoal Black */
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  background: linear-gradient(120deg, #000428, #004e92);
  /* Elegant Background */
  font-family: 'Arial', sans-serif;
}

.wave-pattern-card {
  position: relative;
  width: var(--card-width);
  height: var(--card-height);
  border-radius: 1.5rem;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.5);
  color: var(--text-color);
}

/* Diagonal Moving Gradient Border */
.wave-pattern-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 1.5rem;
  padding: 0.4rem;
  /* Border Thickness */
  background: linear-gradient(45deg,
          var(--gradient-1),
          var(--gradient-2),
          var(--gradient-3));
  background-size: 300% 300%;
  animation: diagonalBorderMove var(--border-speed) infinite linear;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 1;
}

@keyframes diagonalBorderMove {
  0% {
      background-position: 0% 0%;
  }

  50% {
      background-position: 100% 100%;
  }

  100% {
      background-position: 0% 0%;
  }
}

.card-content {
  position: relative;
  z-index: 3;
  padding: 1rem;
  background: rgba(233, 243, 239, 0);
  /* Semi-transparent overlay */
  border-radius: 1rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
}

.card-content h2 {
  font-size: 1.5rem;
  color: white;
  margin-bottom: 0.5rem;
}

.card-content p {
  font-size: 0.7rem;
  opacity: 0.9;
  color: rgb(226, 222, 222);
  line-height: 1.6;
}

.card-content i {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: var(--gradient-3);
}

/* SVG Wave Pattern Background */
.card-body {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  background: url('data:image/svg+xml;utf8, \
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"> \
      <path fill="%23ff4e50" fill-opacity="01" d="M0,288L48,272C96,256,192,224,288,224C384,224,480,256,576,256C672,256,768,224,864,186.7C960,149,1056,107,1152,117.3C1248,128,1344,192,1392,224L1440,256L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path> \
    </svg>');
  background-size: cover;
  animation: waveMove 10s infinite linear alternate;
}

@keyframes waveMove {
  0% {
      background-position: 0% 0%;
  }

  100% {
      background-position: 100% 0%;
  }
}

     <!-- No js -->

UI CARDS

110 CSS Cards

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code