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

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

grid card

Author:
Md. Tofayel islam

7 months ago

895
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Author:
kzsamir849

11 months ago

1.6k
Product features cards

Author:
Henrik R.

1 year ago

3.1k
Profile card

Author:
Mr Robot

2 years ago

12.1k
Card Component Simple
This is a Card Component for simple use &full responsive

Author:
Shariar Hasan

1 year ago

2k
Card responsive and dark mode grid

Author:
Cristian

7 months ago

1.3k
sticky headings
sticky headings

Author:
Anonymous

1 year ago

5.6k
Blog Card

Author:
Md. Tofayel islam

6 months ago

750
Instagram Post UI Mockup
A static HTML and Tailwind CSS component that visually replicates the user interface of an Instagram post. This mockup includes the post header (avatar, username, options), image area, action buttons (like, comment, share, save), like count, caption, and comment section. It features responsive constraints and supports both light and dark mode, closely mimicking the look and feel of the actual Instagram app. Ideal for UI prototyping, style guides, or frontend development practice.

Author:
Hamza Atig

1 month ago

261
E-commerce cards
E-commerce responsive cards with dark mode

Author:
Robert Chunga

11 months ago

2k
User Card

Author:
Md. Tofayel islam

5 months ago

618
Animated Ripple Avatar
Ripple Effect Avatar (Tailwind CSS Component) A visually striking animated component that displays a centered avatar or image surrounded by expanding ripple circles. Built with Tailwind CSS and custom animations, this effect simulates a pulsing or water ripple reaction, drawing attention to the central image. Ideal for user profile sections, hero banners, landing pages, or highlighted features in modern web interfaces. The ripples gradually fade and expand, creating a soft, calming motion that enhances interactivity and depth.

Author:
Acode Master(Mfuranziza Dusabe Hamza)

2 weeks ago

159

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components