Fog Cursor

admin1234
Feb 09, 2026 11
Live Preview

Live Editor

 <!-- Grid Overlay -->
    <div class="grid-overlay"></div>

    <!-- Fog Background with Multiple Layers -->
    <div class="fog-background">
        <div class="fog-layer fog-layer-1" id="fog1"></div>
        <div class="fog-layer fog-layer-2" id="fog2"></div>
        <div class="fog-layer fog-layer-3" id="fog3"></div>
    </div>

    <!-- Ambient Particles -->
    <div class="particle" style="left: 10%; animation-delay: 0s;"></div>
    <div class="particle" style="left: 30%; animation-delay: 3s;"></div>
    <div class="particle" style="left: 50%; animation-delay: 6s;"></div>
    <div class="particle" style="left: 70%; animation-delay: 9s;"></div>
    <div class="particle" style="left: 90%; animation-delay: 12s;"></div>

    <!-- Card -->
    <div class="card">
        <div class="card-icon">✨</div>
        <h2 class="card-title">Fog Cursor</h2>
        <p class="card-description">Move your cursor around to see the beautiful fog effect in the background!</p>
    </div>
  * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #0a0a0a;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            overflow: hidden;
            position: relative;
        }

        /* Fog Container for entire page */
        .fog-background {
            position: fixed;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            overflow: hidden;
        }

        /* Multiple fog layers for better effect */
        .fog-layer {
            position: absolute;
            width: 400px;
            height: 400px;
            border-radius: 50%;
            filter: blur(80px);
            opacity: 0;
            transform: translate(-50%, -50%);
            transition: opacity 0.5s ease;
            mix-blend-mode: screen;
        }

        .fog-layer-1 {
            background: radial-gradient(
                circle,
                rgba(100, 150, 255, 0.4) 0%,
                rgba(100, 150, 255, 0.2) 40%,
                transparent 70%
            );
        }

        .fog-layer-2 {
            background: radial-gradient(
                circle,
                rgba(150, 100, 255, 0.3) 0%,
                rgba(150, 100, 255, 0.15) 40%,
                transparent 70%
            );
            width: 350px;
            height: 350px;
            filter: blur(60px);
        }

        .fog-layer-3 {
            background: radial-gradient(
                circle,
                rgba(100, 200, 255, 0.35) 0%,
                rgba(100, 200, 255, 0.1) 40%,
                transparent 70%
            );
            width: 450px;
            height: 450px;
            filter: blur(100px);
        }

        body:hover .fog-layer {
            opacity: 1;
        }

        /* Grid overlay */
        .grid-overlay {
            position: fixed;
            inset: 0;
            background-image: 
                linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
            background-size: 40px 40px;
            pointer-events: none;
            z-index: 1;
        }

        /* Card styling - clean and simple */
        .card {
            position: relative;
            width: 300px;
            height: 300px;
            background: rgba(26, 26, 26, 0.8);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            z-index: 10;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 30px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
            transition: all 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
            border-color: rgba(100, 200, 255, 0.3);
            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
        }

        .card-icon {
            font-size: 70px;
            margin-bottom: 25px;
            filter: drop-shadow(0 0 20px rgba(100, 200, 255, 0.6));
            animation: float 3s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }

        .card-title {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 15px;
            background: linear-gradient(135deg, #fff, #64c8ff, #9b59b6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            letter-spacing: 1px;
        }

        .card-description {
            font-size: 15px;
            line-height: 1.8;
            color: #aaa;
        }

        /* Ambient particles */
        .particle {
            position: fixed;
            width: 4px;
            height: 4px;
            background: rgba(100, 200, 255, 0.5);
            border-radius: 50%;
            pointer-events: none;
            z-index: 2;
            animation: particle-float 20s linear infinite;
        }

        @keyframes particle-float {
            0% {
                transform: translateY(100vh) translateX(0);
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                transform: translateY(-100px) translateX(100px);
                opacity: 0;
            }
        }
 const fog1 = document.getElementById('fog1');
        const fog2 = document.getElementById('fog2');
        const fog3 = document.getElementById('fog3');

        let mouseX = 0;
        let mouseY = 0;
        let fog1X = 0;
        let fog1Y = 0;
        let fog2X = 0;
        let fog2Y = 0;
        let fog3X = 0;
        let fog3Y = 0;

        document.addEventListener('mousemove', (e) => {
            mouseX = e.clientX;
            mouseY = e.clientY;
        });

        // Smooth fog movement with different speeds
        function animateFog() {
            // Layer 1 - fastest
            fog1X += (mouseX - fog1X) * 0.1;
            fog1Y += (mouseY - fog1Y) * 0.1;
            fog1.style.left = `${fog1X}px`;
            fog1.style.top = `${fog1Y}px`;

            // Layer 2 - medium speed
            fog2X += (mouseX - fog2X) * 0.06;
            fog2Y += (mouseY - fog2Y) * 0.06;
            fog2.style.left = `${fog2X}px`;
            fog2.style.top = `${fog2Y}px`;

            // Layer 3 - slowest
            fog3X += (mouseX - fog3X) * 0.03;
            fog3Y += (mouseY - fog3Y) * 0.03;
            fog3.style.left = `${fog3X}px`;
            fog3.style.top = `${fog3Y}px`;

            requestAnimationFrame(animateFog);
        }

        animateFog();
Categories

Fog Cursor

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
