DevPlatform
Home
Components
Search
Submit
Earn
Login
Sign Up Free
Cursor Effect - 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
Cursor Effect
admin1234
Feb 09, 2026
13
0
Share
Live Preview
Refresh
Live Editor
HTML
CSS
JS
HTML
CSS
JavaScript
1
<div class="card" id="card"> <div class="glow-border"></div> <div class="card-content"> <div class="card-icon">✨</div> <h2 class="card-title">Cursor Effect</h2> <p class="card-description">Hover karo aur dekho kaise cursor ke saath light effect chalta hai!</p> </div> </div>
1
* { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; display: flex; justify-content: center; align-items: center; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .card { position: relative; width: 300px; height: 300px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border-radius: 20px; overflow: hidden; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 25px 45px rgba(0, 0, 0, 0.2); } .card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient( circle 150px at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, 0.3), transparent 100% ); opacity: 0; transition: opacity 0.3s ease; } .card:hover::before { opacity: 1; } .card-content { position: relative; z-index: 2; padding: 30px; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: white; } .card-icon { font-size: 60px; margin-bottom: 20px; filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3)); } .card-title { font-size: 24px; font-weight: 600; margin-bottom: 10px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); } .card-description { font-size: 14px; line-height: 1.6; opacity: 0.9; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.2); } .glow-border { position: absolute; inset: 0; border-radius: 20px; padding: 2px; background: linear-gradient( 45deg, transparent, rgba(255, 255, 255, 0.5), transparent ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.3s ease; } .card:hover .glow-border { opacity: 1; }
1
const card = document.getElementById('card'); card.addEventListener('mousemove', (e) => { const rect = card.getBoundingClientRect(); const x = ((e.clientX - rect.left) / rect.width) * 100; const y = ((e.clientY - rect.top) / rect.height) * 100; card.style.setProperty('--x', `${x}%`); card.style.setProperty('--y', `${y}%`); }); card.addEventListener('mouseleave', () => { card.style.setProperty('--x', '50%'); card.style.setProperty('--y', '50%'); });
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!