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

card
simple card for begin

Author:
Omer fils ELENGA

4 months ago

1.4k
Card grid section
Display article/blog grid

Author:
Mr Robot

2 years ago

26.7k
Product review card

Author:
Rama krishnan Subramanian

9 months ago

1.3k
Pokemon!
Cool Pokemon card!

Author:
Crimson

5 months ago

926
Spinner with card
Use this animated loading indicator when content inside of a card is still loading.

Author:
Md. Tofayel islam

1 year ago

2.5k
Invoice
Invoice

Author:
Ameth Galarcio

1 year ago

2k
Frontend Template Open Source Code Website
This frontend template is designed for a website that provides software services and open-source code to users. It serves as a clean, modern UI for browsing, searching, and downloading open-source projects. Building with HTML, tailwindcss for CSS ,

Author:
Rathanak Phan

1 month ago

217
Feature Section Cards

Author:
Akram Khan

1 year ago

1.6k
Info card

Author:
Samuel Dawson

2 years ago

9.7k
Profile1

Author:
pablitodgb

3 weeks ago

54
card Alert - icons - glass

Author:
ABDO-SY

4 months ago

440
Tailwind image grid
tailwind picture grid

Author:
Anonymous

1 year ago

9.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components