CSS Radial Transparency Center Only

Question

I've created a div with the a text inside. I'm trying to create a hover function, which will cause the square div to have semi-transparent edges.

I'm trying to do this with Radial Gradient. But if I try to use transparency, it causes the whole Radial Gradient to become transparent, too.

Is there a way, I could "remove" the middle color so the text will be visible in the middle and have transparency at the white edges?

I've asked around and I've heard that there is a way of "overriding" it. Not sure if that's possible.

I know photoshop would be a good alternative. But I would like to see if there is a way to succeed an effect like this with purely CSS. Or is there any better way for making a box with transparent edges, something more practical than Radial Gradient that I'm missing?

Answer 1

Something like this

.test {
  background-image: radial-gradient(ellipse, white, transparent 70%);
  color: red;
  font-size: 70px;
  display: inline-block;
  border: solid 1px black;
  }
  

body {
  background-color: lightgreen;
 }

<div class="test">TEST</div>

Answer 2

Thanks to vals I figured it out. This is the answer if anyone is interested.

1: you can set 2 colors. The inner color to be the same as the background. The outer color white.

2: the inner color could be anything and the outer color white. Each color can be made transparent individually. rgba (26,26,26,0) 70%, rgba (250, 250,250,0.6)

The 1st color will be fully transparent so the background will be visible and white will be semi - transparent giving a "shinny" appearance on the edges. 70% will tell css where the 1st color will end (30% away from borders and edges)

I hope that will help some novice developers :)