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

How can I achieve this transparency effect using css? – Photoshop

enter image description here

This design is created in photoshop and I’m trying to convert to html and css.
I have a background image (with the green lights), an overlay with reduced opacity and some text with an icon positioned at the center. How can I attain the effect shown below in html and css?

Tags:

3

Answers


  1. 0

    you could apply a border-radius to the inner element and a box-shadow like so:

    Codepen Demo

    div {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(...) no-repeat;
    background-size: cover;
}

p {
    border-radius: 50%;

    /* add responsive behaviour */
    height : 60vw;
    width  : 60vw;

    /* but limit its max-height/width */
    max-height : 400px;
    max-width  : 400px;

    /* apply a gray shadow outside */
    box-shadow : 0 0 0 50vmax rgba(255,255,255, .4);
}

    50vmax is a shadow spread wide enough and middle alignment can be done e.g. via flexbox positioning. Just adjust the alpha value of the shadow (or the color) as you prefer.

    Final result

    enter image description here

    Login or Signup to reply.
  2. 0 
    .container {
  height:400px;
  width:400px;
  position:relative;
 overflow:hidden;
  }

.overlay {
      top:50%;
    left:50%;
    margin-top:-500px;
    margin-left:-500px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: absolute;
    background-color: transparent;  
    border-style: solid;
    box-sizing: content-box;
    z-index:999;
    pointer-events:none;
    border: 400px solid rgba(0,0,0,.9);
  }
    <div class="container">
  <div class="overlay"></div>
</div>
    Login or Signup to reply.
  3. 0

    Check here!

    Basically you can create a transparent round shape with a big white (or black) border!

    background: transparent;
border-radius: 50%;
border: 1000px solid rgba(0, 0, 0, 0.5);

    JSFiddle

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search