Best Animated Cursors in CSS

<div class="header">
  <h1>✨ Animated Cursors Collection ✨</h1>
  <p>Hover over each card to experience unique cursor effects</p>
</div>

<div class="grid">
  <div class="cursor-card cursor-neon" data-cursor="neon">
    <h2>Neon Trail</h2>
    <p style="color: #9d4edd;">Purple pulsing glow effect</p>
    <div class="demo-text">Move your mouse here</div>
  </div>

  <div class="cursor-card cursor-rainbow" data-cursor="rainbow">
    <h2>Rainbow Trail</h2>
    <p style="color: #ff006e;">Multi-colored following dots</p>
    <div class="demo-text">Move your mouse here</div>
  </div>

  <div class="cursor-card cursor-particle" data-cursor="particle">
    <h2>Particle Explosion</h2>
    <p style="color: #00b4d8;">Blue particles on click</p>
    <div class="demo-text">Click anywhere here</div>
  </div>

  <div class="cursor-card cursor-ring" data-cursor="ring">
    <h2>Ring Effect</h2>
    <p style="color: #06ffa5;">Green glowing ring cursor</p>
    <div class="demo-text">Move your mouse here</div>
  </div>

  <div class="cursor-card cursor-glow" data-cursor="glow">
    <h2>Glow Effect</h2>
    <p style="color: #ff9a00;">Orange soft glow cursor</p>
    <div class="demo-text">Move your mouse here</div>
  </div>

  <div class="cursor-card cursor-comet" data-cursor="comet">
    <h2>Comet Trail</h2>
    <p style="color: #ff006e;">Red comet with tail</p>
    <div class="demo-text">Move your mouse here</div>
  </div>

  <div class="cursor-card cursor-magnetic" data-cursor="magnetic">
    <h2>Magnetic Cursor</h2>
    <p style="color: #00f5ff;">Cyan expandable ring</p>
    <div class="demo-text">Move your mouse here</div>
  </div>

  <div class="cursor-card cursor-ripple" data-cursor="ripple">
    <h2>Ripple Effect</h2>
    <p style="color: #ff69eb;">Pink expanding ripples</p>
    <div class="demo-text">Click anywhere here</div>
  </div>

  <div class="cursor-card cursor-emoji" data-cursor="emoji">
    <h2>Emoji Trail</h2>
    <p style="color: #ffd60a;">Colorful emoji path</p>
    <div class="demo-text">Move your mouse here</div>
  </div>

  <div class="cursor-card cursor-spotlight" data-cursor="spotlight">
    <h2>Spotlight</h2>
    <p style="color: #ffea00;">Yellow illumination effect</p>
    <div class="demo-text">Move your mouse here</div>
  </div>
</div>

 * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            min-height: 100vh;
            overflow-x: hidden;
        }

        .header {
            text-align: center;
            padding: 60px 20px 40px;
            color: white;
        }

        .header h1 {
            font-size: 3rem;
            font-weight: 300;
            margin-bottom: 15px;
        }

        .header p {
            font-size: 1.1rem;
            opacity: 0.8;
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 30px;
            max-width: 1400px;
            margin: 0 auto;
            padding: 40px 20px;
        }

        .cursor-card {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 40px;
            text-align: center;
            border: 2px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
            min-height: 300px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        .cursor-card:hover {
            transform: translateY(-5px);
            border-color: rgba(255, 255, 255, 0.3);
        }

        .cursor-card h2 {
            color: white;
            font-size: 1.5rem;
            margin-bottom: 15px;
            font-weight: 400;
        }

        .cursor-card p {
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.95rem;
            margin-bottom: 20px;
        }

        .demo-text {
            color: white;
            font-size: 1.1rem;
            opacity: 0.6;
            font-style: italic;
        }

        /* Cursor 1: Neon Trail - Purple */
        .cursor-neon {
            cursor: none;
        }

        .cursor-neon-trail {
            position: fixed;
            width: 20px;
            height: 20px;
            background: #9d4edd;
            border-radius: 50%;
            pointer-events: none;
            z-index: 9999;
            box-shadow: 0 0 20px #9d4edd, 0 0 40px #9d4edd;
            animation: pulse 1s infinite;
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.2); opacity: 0.8; }
        }

        /* Cursor 2: Rainbow Trail */
        .cursor-rainbow {
            cursor: none;
        }

        .rainbow-dot {
            position: fixed;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            pointer-events: none;
            z-index: 9998;
        }

        /* Cursor 3: Particle Explosion - Blue */
        .cursor-particle {
            cursor: none;
        }

        .particle {
            position: fixed;
            width: 8px;
            height: 8px;
            background: #00b4d8;
            border-radius: 50%;
            pointer-events: none;
            z-index: 9997;
            animation: particleFloat 1s forwards;
        }

        @keyframes particleFloat {
            to {
                transform: translate(var(--x), var(--y)) scale(0);
                opacity: 0;
            }
        }

        /* Cursor 4: Ring Effect - Green */
        .cursor-ring {
            cursor: none;
        }

        .ring {
            position: fixed;
            width: 30px;
            height: 30px;
            border: 3px solid #06ffa5;
            border-radius: 50%;
            pointer-events: none;
            z-index: 9996;
            transition: all 0.1s ease;
            box-shadow: 0 0 15px #06ffa5;
        }

        .ring-inner {
            position: fixed;
            width: 8px;
            height: 8px;
            background: #06ffa5;
            border-radius: 50%;
            pointer-events: none;
            z-index: 9997;
            transition: all 0.05s ease;
        }

        /* Cursor 5: Glow Effect - Orange */
        .cursor-glow {
            cursor: none;
        }

        .glow-cursor {
            position: fixed;
            width: 40px;
            height: 40px;
            background: radial-gradient(circle, rgba(255, 154, 0, 0.8) 0%, transparent 70%);
            border-radius: 50%;
            pointer-events: none;
            z-index: 9995;
            filter: blur(10px);
            transition: all 0.1s ease;
        }

        /* Cursor 6: Comet Trail - Red */
        .cursor-comet {
            cursor: none;
        }

        .comet {
            position: fixed;
            width: 15px;
            height: 15px;
            background: #ff006e;
            border-radius: 50%;
            pointer-events: none;
            z-index: 9994;
            box-shadow: 0 0 20px #ff006e;
        }

        .comet::after {
            content: '';
            position: absolute;
            width: 100px;
            height: 3px;
            background: linear-gradient(90deg, #ff006e 0%, transparent 100%);
            left: -100px;
            top: 50%;
            transform: translateY(-50%);
        }

        /* Cursor 7: Magnetic Cursor - Cyan */
        .cursor-magnetic {
            cursor: none;
        }

        .magnetic-cursor {
            position: fixed;
            width: 35px;
            height: 35px;
            border: 3px solid #00f5ff;
            border-radius: 50%;
            pointer-events: none;
            z-index: 9993;
            transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 0 0 20px #00f5ff;
        }

        /* Cursor 8: Ripple Effect - Pink */
        .cursor-ripple {
            cursor: none;
        }

        .ripple {
            position: fixed;
            border: 2px solid #ff69eb;
            border-radius: 50%;
            pointer-events: none;
            z-index: 9992;
            animation: rippleExpand 0.6s ease-out forwards;
        }

        @keyframes rippleExpand {
            from {
                width: 0;
                height: 0;
                opacity: 1;
            }
            to {
                width: 80px;
                height: 80px;
                opacity: 0;
            }
        }

        /* Cursor 9: Emoji Trail */
        .cursor-emoji {
            cursor: none;
        }

        .emoji-trail {
            position: fixed;
            font-size: 24px;
            pointer-events: none;
            z-index: 9991;
            animation: emojiFloat 1.5s ease-out forwards;
        }

        @keyframes emojiFloat {
            to {
                transform: translateY(-100px) rotate(360deg);
                opacity: 0;
            }
        }

        /* Cursor 10: Spotlight - Yellow */
        .cursor-spotlight {
            cursor: none;
        }

        .spotlight {
            position: fixed;
            width: 200px;
            height: 200px;
            background: radial-gradient(circle, rgba(255, 234, 0, 0.3) 0%, transparent 70%);
            border-radius: 50%;
            pointer-events: none;
            z-index: 9990;
            filter: blur(30px);
            transition: all 0.15s ease;
        }

        @media (max-width: 768px) {
            .header h1 {
                font-size: 2rem;
            }

            .grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .cursor-card {
                padding: 30px 20px;
            }
        }

        @media (hover: none) {
            .cursor-card p::after {
                content: ' (Touch devices not supported)';
                color: rgba(255, 255, 255, 0.5);
                font-size: 0.85rem;
            }
        }

     const cards = document.querySelectorAll('.cursor-card');
        let currentCursor = null;
        let cursorElements = [];

        // Neon Trail
        function createNeonCursor(card) {
            const trail = document.createElement('div');
            trail.className = 'cursor-neon-trail';
            document.body.appendChild(trail);
            cursorElements.push(trail);

            card.addEventListener('mousemove', (e) => {
                trail.style.left = e.clientX - 10 + 'px';
                trail.style.top = e.clientY - 10 + 'px';
            });
        }

        // Rainbow Trail
        function createRainbowCursor(card) {
            const colors = ['#ff006e', '#8338ec', '#3a86ff', '#06ffa5', '#ffbe0b'];
            let colorIndex = 0;

            card.addEventListener('mousemove', (e) => {
                const dot = document.createElement('div');
                dot.className = 'rainbow-dot';
                dot.style.left = e.clientX - 5 + 'px';
                dot.style.top = e.clientY - 5 + 'px';
                dot.style.background = colors[colorIndex % colors.length];
                document.body.appendChild(dot);
                
                colorIndex++;
                
                setTimeout(() => {
                    dot.style.opacity = '0';
                    dot.style.transform = 'scale(0)';
                    dot.style.transition = 'all 0.5s ease';
                    setTimeout(() => dot.remove(), 500);
                }, 0);
            });
        }

        // Particle Explosion
        function createParticleCursor(card) {
            card.addEventListener('click', (e) => {
                for (let i = 0; i < 12; i++) {
                    const particle = document.createElement('div');
                    particle.className = 'particle';
                    particle.style.left = e.clientX - 4 + 'px';
                    particle.style.top = e.clientY - 4 + 'px';
                    
                    const angle = (i / 12) * Math.PI * 2;
                    const distance = 50;
                    particle.style.setProperty('--x', Math.cos(angle) * distance + 'px');
                    particle.style.setProperty('--y', Math.sin(angle) * distance + 'px');
                    
                    document.body.appendChild(particle);
                    setTimeout(() => particle.remove(), 1000);
                }
            });
        }

        // Ring Effect
        function createRingCursor(card) {
            const ring = document.createElement('div');
            ring.className = 'ring';
            const inner = document.createElement('div');
            inner.className = 'ring-inner';
            document.body.appendChild(ring);
            document.body.appendChild(inner);
            cursorElements.push(ring, inner);

            card.addEventListener('mousemove', (e) => {
                ring.style.left = e.clientX - 15 + 'px';
                ring.style.top = e.clientY - 15 + 'px';
                inner.style.left = e.clientX - 4 + 'px';
                inner.style.top = e.clientY - 4 + 'px';
            });
        }

        // Glow Effect
        function createGlowCursor(card) {
            const glow = document.createElement('div');
            glow.className = 'glow-cursor';
            document.body.appendChild(glow);
            cursorElements.push(glow);

            card.addEventListener('mousemove', (e) => {
                glow.style.left = e.clientX - 20 + 'px';
                glow.style.top = e.clientY - 20 + 'px';
            });
        }

        // Comet Trail
        function createCometCursor(card) {
            const comet = document.createElement('div');
            comet.className = 'comet';
            document.body.appendChild(comet);
            cursorElements.push(comet);

            card.addEventListener('mousemove', (e) => {
                comet.style.left = e.clientX - 7.5 + 'px';
                comet.style.top = e.clientY - 7.5 + 'px';
            });
        }

        // Magnetic Cursor
        function createMagneticCursor(card) {
            const magnetic = document.createElement('div');
            magnetic.className = 'magnetic-cursor';
            document.body.appendChild(magnetic);
            cursorElements.push(magnetic);

            card.addEventListener('mousemove', (e) => {
                magnetic.style.left = e.clientX - 17.5 + 'px';
                magnetic.style.top = e.clientY - 17.5 + 'px';
            });

            card.addEventListener('mousedown', () => {
                magnetic.style.transform = 'scale(0.8)';
            });

            card.addEventListener('mouseup', () => {
                magnetic.style.transform = 'scale(1)';
            });
        }

        // Ripple Effect
        function createRippleCursor(card) {
            card.addEventListener('click', (e) => {
                const ripple = document.createElement('div');
                ripple.className = 'ripple';
                ripple.style.left = e.clientX + 'px';
                ripple.style.top = e.clientY + 'px';
                ripple.style.transform = 'translate(-50%, -50%)';
                document.body.appendChild(ripple);
                setTimeout(() => ripple.remove(), 600);
            });
        }

        // Emoji Trail
        function createEmojiCursor(card) {
            const emojis = ['✨', '⭐', '💫', '🌟', '💖', '🎉'];
            let emojiIndex = 0;

            card.addEventListener('mousemove', (e) => {
                if (Math.random() > 0.8) {
                    const emoji = document.createElement('div');
                    emoji.className = 'emoji-trail';
                    emoji.textContent = emojis[emojiIndex % emojis.length];
                    emoji.style.left = e.clientX - 12 + 'px';
                    emoji.style.top = e.clientY - 12 + 'px';
                    document.body.appendChild(emoji);
                    emojiIndex++;
                    setTimeout(() => emoji.remove(), 1500);
                }
            });
        }

        // Spotlight
        function createSpotlightCursor(card) {
            const spotlight = document.createElement('div');
            spotlight.className = 'spotlight';
            document.body.appendChild(spotlight);
            cursorElements.push(spotlight);

            card.addEventListener('mousemove', (e) => {
                spotlight.style.left = e.clientX - 100 + 'px';
                spotlight.style.top = e.clientY - 100 + 'px';
            });
        }

        // Initialize cursors
        cards.forEach(card => {
            const cursorType = card.dataset.cursor;

            card.addEventListener('mouseenter', () => {
                cursorElements.forEach(el => el.remove());
                cursorElements = [];

                switch(cursorType) {
                    case 'neon': createNeonCursor(card); break;
                    case 'rainbow': createRainbowCursor(card); break;
                    case 'particle': createParticleCursor(card); break;
                    case 'ring': createRingCursor(card); break;
                    case 'glow': createGlowCursor(card); break;
                    case 'comet': createCometCursor(card); break;
                    case 'magnetic': createMagneticCursor(card); break;
                    case 'ripple': createRippleCursor(card); break;
                    case 'emoji': createEmojiCursor(card); break;
                    case 'spotlight': createSpotlightCursor(card); break;
                }
            });

            card.addEventListener('mouseleave', () => {
                cursorElements.forEach(el => el.remove());
                cursorElements = [];
            });
        });