CODEWITHSUNDEEP
css
Maximilian Fuchs
Maximilian Fuchs

Reputation: 441

CSS box-shadow on round image

I tried to put an fade out effect on a picture. I used box-shadow (inset). There is a slim circle (in my browser at least (ff, chrome on MacOS)) where the box shadow started. Any tricks to hide this thin outer circle? I tried to use an img element in the div and put a box shadow over the div, but failed.

div {
    background-image: url('https://www.welt.de/img/wirtschaft/mobile172774245/5812507447-ci102l-w1024/GERMANY-US-GABRIEL-MUSK-TESLA.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    box-shadow: inset 0 0 25px 25px #fff;
}
<div>
</div>

Upvotes: 4

Views: 5365

Answers (3)

Krypt1
Krypt1

Reputation: 1066

Possible workaround: make background clip to the content box and set a minimal padding. Here's an example:

div {
    background-image: url('https://www.welt.de/img/wirtschaft/mobile172774245/5812507447-ci102l-w1024/GERMANY-US-GABRIEL-MUSK-TESLA.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    box-shadow: inset 0 0 25px 25px #fff;
    background-clip: content-box;
    padding: 1px;
}
<div>
</div>

Upvotes: 3

Christian Vincenzo Traina
Christian Vincenzo Traina

Reputation: 10384

I don't like this solution, but I propose it as workaround:

div {
    background-image: url('https://www.welt.de/img/wirtschaft/mobile172774245/5812507447-ci102l-w1024/GERMANY-US-GABRIEL-MUSK-TESLA.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    box-shadow: inset 0 0 25px 25px #fff;
    margin: 0;
    box-sizing: border-box;
}

div::after {
  content: "";
  display: block;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  border: solid 10px white;
  border-radius: 50%;
  position: relative;
  top: -5px;
  left: -5px;
}
<div>
</div>

Upvotes: 2

myf
myf

Reputation: 11283

More workaround: ditch inset shadow and use radial gradient background instead:

div {
    background-image: radial-gradient(closest-side, transparent, transparent 80%, white), url('https://www.welt.de/img/wirtschaft/mobile172774245/5812507447-ci102l-w1024/GERMANY-US-GABRIEL-MUSK-TESLA.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    width: 400px;
    height: 400px;
    border-radius: 50%;
 }
<div>
</div>

Upvotes: 3

Related Questions