DevPlatform
Home
Components
Search
Submit
Earn
Login
Sign Up Free
Fog Cursor - Preview | DevPlatform
DevPlatform
Categories
Accordion
Animation
Box Shadow
Button
Card
Footer
Form
Gallery
Hero Section
Inputs
Loader
Marquee
Modal
Modules
Navbar
Progress Bar
Radio Buttons
Search-Bar
Sections
Slider
Tab
Timeline
Toggle
Fog Cursor
admin1234
Feb 09, 2026
11
0
Share
Live Preview
Refresh
Live Editor
HTML
CSS
JS
HTML
CSS
JavaScript
1
<!-- 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>
1
* { 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; } }
1
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();
Comments
0
Want to comment?
Please
login
or
sign up
to post comments.
No comments yet
Be the first to comment on this component!
Comments 0
Want to comment?
Please login or sign up to post comments.
No comments yet
Be the first to comment on this component!