card

glowing, tilt card

This tailwind example is contributed by Akram Khan, on 03-Jun-2025. Component is made with Tailwind CSS v3. It is responsive.

Card

Author Akram Khan

592

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enhanced Glassmorphic Project Card</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
        }

/* CSS Custom Property for conic-gradient angle animation */
        @property --angle {
          syntax: '<angle>';
          initial-value: 0deg;
          inherits: false;
        }

@keyframes spinAngle {
          to {
            --angle: 360deg;
          }
        }

.card-container {
            perspective: 1500px; /* Applied to the parent for 3D effect */
            display: flex; /* For centering */
            align-items: center; /* For centering */
            justify-content: center; /* For centering */
            min-height: 100vh; /* Full viewport height */
            padding: 1rem; /* Padding for smaller screens */
            background: linear-gradient(135deg, #1a202c 0%, #2d3748 50%, #4a5568 100%); /* Darker, more sophisticated gradient */
        }

.project-card {
            width: 100%;
            max-width: 380px; /* Slightly larger card */
            position: relative;
            border-radius: 20px; /* Slightly larger for the glow to wrap around */
            transition: transform 0.1s linear;
            transform-style: preserve-3d;
            z-index: 1;
        }

/* Rainbow glow pseudo-element */
        .project-card::before {
            content: "";
            position: absolute;
            top: -6px; /* Adjusted for new border-radius */
            left: -6px;
            right: -6px;
            bottom: -6px;
            background: conic-gradient(
                from var(--angle),
                #ff0072, #ff00c8, #ad00ff, #0088ff, #00e0ff,
                #00ff8c, #aeff00, #ffee00, #ff7f00, #ff0000, #ff0072
            );
            border-radius: 26px; /* Must be larger than card's content border-radius */
            filter: blur(18px); /* Slightly more blur for a softer glow */
            z-index: -1;
            opacity: 0;
            transition: opacity 0.4s ease-out;
            animation: spinAngle 2.5s linear infinite paused; /* Faster spin */
        }

.project-card:hover::before {
            opacity: 0.85; /* Brighter glow */
            animation-play-state: running;
        }

/* Actual card content with glassmorphism */
        .card-content {
            background-color: rgba(30, 41, 59, 0.7); /* Slightly more opaque for readability */
            backdrop-filter: blur(15px) saturate(180%);
            -webkit-backdrop-filter: blur(15px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.15); /* Slightly more visible border */
            border-radius: 20px; /* Matches project-card */
            overflow: hidden;
            color: #e2e8f0;
            transform: translateZ(0);
            position: relative; /* For the glare pseudo-element */
        }

/* Glare effect on card content */
        .card-content::after {
            content: '';
            position: absolute;
            top: 0;
            left: -150%; /* Start off-screen */
            width: 60%; /* Width of the glare */
            height: 100%;
            background: linear-gradient(
                to right,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.12) 50%, /* Subtle glare */
                rgba(255, 255, 255, 0) 100%
            );
            transform: skewX(-25deg); /* Angled glare */
            transition: left 0.85s cubic-bezier(0.23, 1, 0.32, 1); /* Smooth transition */
            z-index: 1; /* Above image, below text content */
            pointer-events: none; /* Allow clicks through */
        }

.project-card:hover .card-content::after {
            left: 150%; /* Move across and off the card */
        }

.project-card img {
            border-bottom: 1px solid rgba(255, 255, 255, 0.12);
            width: 100%;
            height: 220px; /* Slightly taller image */
            object-fit: cover;
            transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1); /* Smooth transition for scale/translate */
            position: relative; /* Needed for z-index stacking if issues arise, but usually fine */
            z-index: 0; /* Ensure it's below the glare */
        }

/* Tech Tag Styling */
        .tech-tag {
            transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
            background-color: rgba(255, 255, 255, 0.05); /* Subtle background for tags */
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

.project-card:hover .tech-tag {
            transform: translateY(-3px) scale(1.05); /* Pop out more */
            box-shadow: 0 4px 8px rgba(0,0,0,0.25);
        }

/* Button Styling */
        .view-details-button {
           transition: all 0.25s ease-in-out, transform 0.15s ease-out;
        }

.view-details-button:hover {
            transform: translateY(-4px) scale(1.03); /* More lift */
            box-shadow: 0 10px 20px rgba(59, 130, 246, 0.35), 0 0 15px rgba(96, 165, 250, 0.3); /* Enhanced shadow */
        }
        .view-details-button:active {
            transform: translateY(-2px) scale(1.01);
            box-shadow: 0 5px 10px rgba(59, 130, 246, 0.25);
        }

</style>
</head>
<body class="bg-gradient-to-br from-slate-950 via-purple-950 to-slate-950 antialiased">

<div class="card-container">
        <div class="project-card">
            <div class="card-content">
                <img src="https://placehold.co/400x250/0f172a/a5b4fc?text=Enhanced+Project"
                     alt="Project Thumbnail"
                     onerror="this.onerror=null; this.src='https://placehold.co/400x250/0f172a/FFFFFF?text=Image+Error';">
                <div class="p-6"> 
                    <h3 class="text-2xl font-bold text-white mb-3">Advanced Interactive Card</h3>
                    <p class="text-sm text-slate-300 mb-5 leading-relaxed">
                        Featuring enhanced 3D tilt, image parallax, card glare, animated rainbow glow, and interactive UI elements.
                    </p>
                    <div class="flex flex-wrap gap-2.5 mb-6"> 
                        <span class="tech-tag bg-sky-700/50 text-sky-200 px-3 py-1.5 text-xs font-semibold rounded-full">HTML5</span>
                        <span class="tech-tag bg-pink-700/50 text-pink-200 px-3 py-1.5 text-xs font-semibold rounded-full">CSS3</span>
                        <span class="tech-tag bg-yellow-600/50 text-yellow-100 px-3 py-1.5 text-xs font-semibold rounded-full">JavaScript ES6</span>
                        <span class="tech-tag bg-indigo-700/50 text-indigo-200 px-3 py-1.5 text-xs font-semibold rounded-full">TailwindCSS</span>
                    </div>
                    <a href="#"
                       class="view-details-button inline-block w-full text-center bg-blue-600 hover:bg-blue-500 active:bg-blue-700 text-white font-semibold py-3 px-4 rounded-lg shadow-lg hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-60">
                        Explore Project
                    </a>
                </div>
            </div>
        </div>
    </div>

const image = card.querySelector('img');
            const maxTilt = 10; // Max tilt in degrees (slightly increased)
            const imageMaxOffset = 12; // Max pixels the image will move for parallax

card.addEventListener('mousemove', (e) => {
                const rect = card.getBoundingClientRect();
                const x = e.clientX - rect.left - rect.width / 2;
                const y = e.clientY - rect.top - rect.height / 2;

const rotateY = (x / (rect.width / 2)) * maxTilt;
                const rotateX = (y / (rect.height / 2)) * -maxTilt;

card.style.transition = 'transform 0.05s linear';
                card.style.transform = `perspective(1500px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)`; // Slightly more scale

if (image) {
                    const imageOffsetX = (x / (rect.width / 2)) * -imageMaxOffset * 0.4; // Parallax factor
                    const imageOffsetY = (y / (rect.height / 2)) * imageMaxOffset * 0.4; // Parallax factor (already inverted due to -maxTilt)
                    
                    image.style.transition = 'transform 0.05s linear'; // Quick follow for image
                    image.style.transform = `translateX(${imageOffsetX}px) translateY(${imageOffsetY}px) scale(1.1)`; // Image scales more
                }
            });

card.addEventListener('mouseenter', () => {
                card.style.transition = 'transform 0.2s cubic-bezier(0.23, 1, 0.32, 1)';
                if (image) {
                    image.style.transition = 'transform 0.3s cubic-bezier(0.23, 1, 0.32, 1)'; // Smooth scale in for image
                    image.style.transform = `scale(1.1)`; // Initial scale on card hover
                }
            });

card.addEventListener('mouseleave', () => {
                card.style.transition = 'transform 0.5s cubic-bezier(0.23, 1, 0.32, 1)';
                card.style.transform = `perspective(1500px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)`;
                if (image) {
                    image.style.transition = 'transform 0.5s cubic-bezier(0.23, 1, 0.32, 1)';
                    image.style.transform = 'translateX(0px) translateY(0px) scale(1)';
                }
            });
        });
    </script>

</body>
</html>

Related Examples

Responsive Testimonial Card with stars ratings

Author:
Quentin Rivers

1 year ago

2.2k
Card with full width image
centered content

Author:
Mr Robot

3 years ago

10.1k
Info cards for admin panel

Author:
Sophia Baker

3 years ago

12.1k
Basic US Flag Card
Here's a set of card components styled with Tailwind CSS that represent various US-themed elements:

Author:
Uwase Alliance

8 months ago

639
Labs card
Lab item list card

Author:
Sedat Kumcu

1 year ago

1.9k
payment card
A payment card is a type of card issued by a financial institution (like a bank) that allows the cardholder to make financial transactions. These transactions can include purchasing goods and services, withdrawing cash, or transferring money. Here’s a description based on the main types of payment cards:

Author:
dev-fab250

8 months ago

640
Login Form
A modern Tailwind CSS animated login form featuring smooth transitions, premium UI styling, responsive layout, and interactive input effects. Designed for admin panels, SaaS dashboards, and secure web applications, this login template delivers a clean light-theme interface with professional animations and a high-end user experience.

Author:
shrenik khule

5 days ago

12
Image Card
An image. Shows title and description info when hovering. Image zooms and darkens when hovering.

Author:
Nick Girga

9 months ago

819
Information card

Author:
Samuel Dawson

3 years ago

12.1k
Floating capsule

Author:
Amazing Engineer

8 months ago

737
Weather info Card
Inspired from Mamba UI

Author:
Ron Hicks

3 years ago

12.1k
grid card

Author:
Md. Tofayel islam

1 year ago

1.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components