Transparent Outlines for HTML Elements Using Vanilla CSS

Recently I decided to update my personal website. I ran into a problem I wanted to solve that I could not find an easy off-the-shelf solution for. So, I decided to write up my discovery of a solution, in hopes it helps someone down the line!

Background

I have been inspired recently by ice dyed tie dye shirts and 2000s era JRPG UIs, and I wanted to try to hack together something similar to present myself.

The first thing I did was add a gradient to my text. There are numerous wonderful guides for doing this via

div {
  background-clip: text;
  color: transparent;
  backgroundImage: `radial-gradient`;
}

and I was happy with the results I got with a quick implementation.

Adding movement

The next step was for the gradient to move with the user's mouse to give it an underwater glimmer (and make my simple text display pages interactive!)

For this, I found a wonderful tutorial from Axell Martinez, posted on Medium in 2023: [https://axellmartinezdev.medium.com/how-to-move-a-gradient-with-mouse-react-js-88281e9c3f9f]

This worked great! Axell's approach of creating a custom div that just handled the gradient allowed me to factor out the logic into it's own component sitting at a high level in my app's layout, so that the gradient wouldn't need to reload with every component/page change.

Thank you Axell!

Adding Borders

I had one final goal for this re-design, which was to create borders for the text containers that were outlined with the same gradient as the text.

This proved tricky at first. Gradient borders, per se, were not a particularly difficult task, but all the ready-made implementations were either adding a specific background-clip effect per-div, which would get in the way of the way I was already using background-clip: text;, or adding a gradient to the div itself.

In order to get the text and the borders displaying the same gradient (the moving one I implemented earlier), I needed to find another way to make the borders transparent. Simply adding borders and making them transparent did not work, they vanished (or rather transparently displayed the non-transparent mask I was clipping in order to get the effect working).

I settled on making them a sort of light misty grey, thinking I could fake the effect by fading the text color to match, when I had a breakthrough moment. As I lowered the transparency in my css block

  background-color: transparent;
  outline-style: solid;
  outline-color: rgba(100, 100, 100, ~~0.9~~ 0.5);
  outline-width: 3px;

I noticed some color appearing in the border, and increasing as I lowered the opacity of outline-color. It was a little shaded, however.

But with outline-color rgba(255, 255, 255, 0.1); the masking was barely noticeable, and my gradient was visible through it! NB: setting the opacity to 0.0 is the same `outline-color: transparent, which results in the gradient outline disappearing.