CSS Radial Gradient Shade - Back

Question

You have some existing code from a Wordpress template that draws the shadow of an ellipse. A shadow radiates down in an ellipse. Only the lower half of the ellipse is visible, creating the effect of the lower shadow.

I just want to “flip” the “shadow effect” of the ellipse so that only the upper half of the shadow is visible. Seems simple. I am lost.

I believe the code fragment draws a radial shadow:

.fusion-separator.sep-shadow {
  height: 1px;
  overflow: visible;
  border: none;
  background: none;
  background: linear-gradient(left, rgba(150, 150, 150, 0) 0%, rgba(150, 150, 150, 0) 15%, rgba(150, 150, 150, 0.65) 50%, rgba(150, 150, 150, 0) 85%, rgba(150, 150, 150, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#00000000', GradientType=1);
}
.fusion-separator.sep-shadow:after {
  display: block;
  margin-top: 10px;
  height: 6px;
  width: 100%;
  content: '';
  background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.5) 0px, rgba(255, 255, 255, 0) 65%);
}

Live example on the site:

Existing radial shadow

Answer 1

radial-gradient, , 50% - 50%, , , ( X) , ( Y). (50%, -3px), .

, , , (.. (50% + 100%) (50% - 100%)). , , , top -1 * height of the pseudo element.

background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.5) 0px, rgba(255, 255, 255, 0) 65%);

.fusion-separator.sep-shadow {
  position: relative;
  height: 50px;
  overflow: visible;
  border: none;
  background: linear-gradient(to left, rgba(150, 150, 150, 0) 0%, rgba(150, 150, 150, 0) 15%, rgba(150, 150, 150, 0.65) 50%, rgba(150, 150, 150, 0) 85%, rgba(150, 150, 150, 0) 100%);
}
.fusion-separator.sep-shadow:after {
  position: absolute;
  content: '';
  top: -6px;
  height: 6px;
  width: 100%;
  content: '';
  background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.5) 0px, rgba(255, 255, 255, 0) 65%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='fusion-separator sep-shadow'></div>

Hide result

---

50% 100%, , , .

.fusion-separator.sep-shadow {
  position: relative;
  height: 50px;
  overflow: visible;
  border: none;
  background: linear-gradient(to left, rgba(150, 150, 150, 0) 0%, rgba(150, 150, 150, 0) 15%, rgba(150, 150, 150, 0.65) 50%, rgba(150, 150, 150, 0) 85%, rgba(150, 150, 150, 0) 100%);
}
.fusion-separator.sep-shadow:after {
  position: absolute;
  content: '';
  top: -6px;
  height: 6px;
  width: 100%;
  content: '';
  background: radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, 0.5) 0px, rgba(255, 255, 255, 0) 65%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='fusion-separator sep-shadow'></div>

Hide result

Answer 2

?

.fusion-separator {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}