Photoshop Question posted in
The official user guide can be found here.

CSS Radial Transparency Center Only – Photoshop

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?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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 :)


  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search