White line between linear-gradient and box-shadow with vertically centered elements

user_220272 0
Viewed 415

When combining a vertical-gradient and a box-shadow on a vertical centered element it displays a white line between the element and the shadow (at certain sizes).

To be able to show the problem the code snippet forces a size where this problem occurs, in the real case example the heigh scales with the viewport.

This issue happens on Chrome Version 71.0.3578.98 (Safari renders well, didn't test any other browser).

Is there any workarounds that could solve this issue apart of dropping the gradient?

.center {
  height: 96px;
  display: inline-flex;
}

.box {
  width: 50px;
  height: 61%;
  margin: auto 0;
  margin-right: 5px;
  background-color: blue;
  box-shadow: navy 0 20px 0;
}

.box--grad {
  background: radial-gradient(circle at top, #207ee2 60%, #90bded 150%);
}
<div class="center">
  <div class="box"></div>
  <div class="box box--grad"></div>
</div>

google-chrome css html
3 Answers

Applying a background-position-y: -1px; rule to the gradient seems to solve the problem, without having a negative effect on other browsers (tested on Firefox). 

.center {
  height: 96px;
  display: inline-flex;
}

.box {
  width: 50px;
  height: 61%;
  margin: auto 0;
  margin-right: 5px;
  background-color: blue;
  box-shadow: navy 0 20px 0;
}

.box--grad {
  background: radial-gradient(circle at top, #207ee2 60%, #90bded 150%);
  background-position-y: -1px;
}
<div class="center">
  <div class="box"></div>
  <div class="box box--grad"></div>
</div>

user_8391580

You can slightly increase the background-size:

.center {
  height: 96px;
  display: inline-flex;
}

.box {
  width: 50px;
  height: 61%;
  margin: auto 0;
  margin-right: 5px;
  background-color: blue;
  box-shadow: navy 0 20px 0;
}

.box--grad {
  background: radial-gradient(circle at top, #207ee2 60%, #90bded 150%);
  background-size:100% calc(100% + 1px);
}
<div class="center">
  <div class="box"></div>
  <div class="box box--grad"></div>
</div>

Or adjust the background-position to bottom (in case the shadow is always applied to the bottom)

.center {
  height: 96px;
  display: inline-flex;
}

.box {
  width: 50px;
  height: 61%;
  margin: auto 0;
  margin-right: 5px;
  background-color: blue;
  box-shadow: navy 0 20px 0;
}

.box--grad {
  background: radial-gradient(circle at top, #207ee2 60%, #90bded 150%) bottom;
}
<div class="center">
  <div class="box"></div>
  <div class="box box--grad"></div>
</div>

user_86203330

maybe you could use a

:after

.content{
    height: 96px;
    display: inline-flex;
    position: relative;
}
.box {
    width: 50px;
    margin: 0 20px;
}
.box-shadow1{
     background: radial-gradient(circle at top, #00448b 60%, #6dfff1 150%);}
 .box-shadow2{
    background: radial-gradient(circle at top, #ffec04 , #f48f11 );}
 .box-shadow1:after {
       width: 50px;
    height: 100%;
    content: '';
    position: absolute;
    bottom: 0;
    z-index: -1;
    box-shadow: 0px 0px 47px 0px #29adec;
}
 .box-shadow2:after {
    width: 50px;
    height: 20px;
    content: '';
    position: absolute;
    bottom: 0;
    box-shadow: 0px 0px 20px 0px #a67300;
}
<div class="content">
  <div class="box box-shadow1"></div>
  <div class="box box-shadow2"></div>
</div>

user_105820280
Related