The Power of CSS Variables — Make a gradient follow the cursor

What you’ll learn

CSS variables are such a powerful tool for creating interactive experiences. Back in the days I had to set a lot of inline styles with JavaScript, repeating styles between CSS and JS. Nowadays with CSS variables (or custom properties) it is such a breeze to only update translateX without needing to repeat the other CSS transform properties.

In this video we’ll be creating an animated CSS gradient that follows your mouse, first in plain CSS, after that with Tailwind in CodeSandbox’ Projects page.