Weekend hobby: Achieving Glassmorphism (ik 💀) with mouse glow

Okay here is an attempt to be authentic without any LLMs to make this post for me, in this sea of robots. i have a hot take on them at the end of this blog post as to why you should never skip learning your basics!

One of my old hobbies was that over the weekends, whenever i saw something beautiful implemented somewhere,
i immediately bang my head against the keyboard until i figure out how to do it with HTML/CSS.

Yes... only these 2... HTML and CSS, i try to stay away from having to resort to JS as much as i can, in order to make this thing i saw,
is rendered as native as the browser can, so it can be super performant, and less verbose when implemented.

Here is my latest weekend session 😄 the focus was on what was so called as glassmorphism, tho it has became an old design trend term at this point
but this is mainly about how i could make the mouse have a glowing effect against the acrylic-y background of the UI elements, which i first saw this in windows 10.

before further ado, here is the codepen to see it in action and see the code - you only see the effect if you mess with the calculator with a mouse in order.
https://codepen.io/monabbous/full/VYaOwNb

and here is the code for it

:root {
  /* these are the base vars which is used in the class it self, but can be used in an extended format */
  --glassmorphism-bg__position-x: calc(var(--mouse-x, -100vmax));
  --glassmorphism-bg__position-y: calc(var(--mouse-y, -100vmax));

  --glassmorphism-bg: radial-gradient(
      circle at var(--glassmorphism-bg__position-x) var(
          --glassmorphism-bg__position-y
        ),
      hsla(from var(--colors__accent) h s l / 0.05) 0%,
      transparent 30%
    ) center center / 100vw 100vh fixed no-repeat;

  --glassmorphism-border: radial-gradient(
      circle at calc(var(--glassmorphism-bg__position-x)) calc(
          var(--glassmorphism-bg__position-y)
        ),
      hsla(from var(--colors__accent) h s l / 0.2) 0%,
      transparent 10%
    ) center center / 100vw 100vh fixed no-repeat border-box;
}

/* slap this class on any element and it will just have the acrylic with the mouse glowing effect */
.glassmorphism {
  border: 1px solid transparent;
  backdrop-filter: blur(40px);
  background: var(--glassmorphism-bg);
  background-color: hsla(from var(--colors__background) h s l / 0.4);

  &::before {
    content: "";
    position: absolute;
    inset: -1px;
    margin: auto;
    z-index: 100;
    border-radius: inherit;
    border: inherit;
    border-color: transparent;
    padding: inherit;
    pointer-events: none;
    background: var(--glassmorphism-border);
    mask: linear-gradient(white, white) padding-box no-repeat, linear-gradient(
          white,
          white
        ) no-repeat;
    mask-composite: exclude;
  }
}

/* this is the only js needed to track the mouse position and save it as css variables */
const root = document.documentElement;

window.addEventListener("pointermove", (e) => {
  root.style.setProperty("--mouse-x", `${e.clientX}px`);
  root.style.setProperty("--mouse-y", `${e.clientY}px`);
});

Now the thought process that i went through:

First how can i do this with just css and html? well... you need the mouse position, so i need js here... and so i added an event listener to take the mouse position in the window and save it as css variable, and that's it!! no more JS!

Then i was thinking about how can i show the glowing effect for only the foreground elements such as cards or buttons, AND most importantly there is continuity between the elements - the glow is presented between different elements as a circle that goes through the elements and its continuous through all of them.
well i didn't have to think hard, background-attachment: fixed; thats the secret, it tells the browser to render the background positioned and sized relative to the window and not the element, but clip the portion of where the element is positioned relative to the window and use it as a background, so what i did is defined a small circle gradient with where the center is a color i chose and grades to transparent, and linked the position of the origin of the gradient to be the mouse position and with the fixed attachment, the background is shared with the elements with continuity!!

It was a fun short moment of eureka... but it still didn't feel like it was sold to me, there was something missing... the border!

the border is essentially the glowing effect multiplied, just like how glass reflect the light at the end of the material.

so i used the before pseudo element, where it has the same background as the main element, but with a higher opacity, but it has a mask that only shows the border area of the element, so it looks like a border but its actually a full element with a mask on it.

Why? isn't glassmorphism an overused trend and now dead?

Well yeah, however this isn't like any glassmorphism, it looks somewhat photorealistic. but the main goal is that i wanted to share how after 10 years of software development, coding is still fun and challenging :D this is how i got really good at frontend, and earned to put "pixel perfect implementation of designs" on my resume.

Even with the surge of generative AIs making these type of coding like a piece of cake as someone would think. it wouldn't have been able to have this thought process to produce it this efficiently since (afaik) it hasn't been shared anywhere... until now with this post...

The point is, no matter how fast a gen-AI would code stuff like this, there is always something that will make you roll up your sleeves and spend time on figure it out using your basics knowledge, so always cover your basics, practice with a lot of side projects.

---

FIN.