Gradient Cursor Glow

Radial glow background that follows the cursor over a dark card.

Neddev Studiobeweeg de muis

How to use it

Paste the HTML where the components should appear.
Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
Add the JavaScript and call init() with the element that contains the HTML.

<!-- Gradient Cursor Glow · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="gcg-stage"><div class="gcg-glow"></div><div class="gcg-content"><b>Neddev Studio</b><span>beweeg de muis</span></div></div>
</div>

/* Gradient Cursor Glow · NedDev · eigen werk. */
.gcg-stage{position:absolute;inset:0;overflow:hidden;background:#0a0a0a;display:flex;align-items:center;justify-content:center;font-family:'Switzer',system-ui,sans-serif}
.gcg-glow{position:absolute;inset:0;background:radial-gradient(220px circle at var(--gx,50%) var(--gy,50%),rgba(245,72,15,.55),rgba(245,72,15,0) 60%);transition:background .12s ease}
.gcg-content{position:relative;text-align:center;z-index:2}.gcg-content b{display:block;font-size:24px;color:#fff;letter-spacing:-.01em}.gcg-content span{display:block;margin-top:6px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.gcg-stage::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:30px 30px}

// Gradient Cursor Glow · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.gcg-stage')||root;var glow=root.querySelector('.gcg-glow');var reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;if(reduce)return;root.addEventListener('mousemove',function(e){var r=root.getBoundingClientRect();glow.style.setProperty('--gx',(e.clientX-r.left)+'px');glow.style.setProperty('--gy',(e.clientY-r.top)+'px');});
}
init(document.querySelector('.jouw-container'));

More components

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →