Search code examples
cssgradientcss-shapesradial-gradients

CSS radial gradient drop shadow - reversed

Have some pre-existing code from a Wordpress template that draws an ellipse drop shadow. The shadow radiates downward in an ellipse. Only the bottom half of the ellipse is visible, creating a bottom shadow effect.

I simply want to "reverse" the ellipse "shadow effect" so that only the top half of the shadow is visible. Seems simple. I'm lost.

What I believe is the code snippet drawing the 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 site:

Existing Radial Shadow

enter image description here

Solution

  • The radial-gradient that is used currently is positioned at 50% - 50% which is nothing but the point represented by the horizontal center of the container (in X axis) and a point that is half the height of the container above the container itself (in Y axis). For this case, it would be at (50%, -3px) and so only the bottom half of the ellipse is visible.

    To make the top half of the ellipse visible, just adjust the positioning such that it is below the container instead of above it (that is, make it (50% + 100%) instead of (50% - 100%)). After this, I assume you would want it to be on top of the parent element and so position it absolutely with respect to the parent and then set top as -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>

    You could also position it as 50% 100% like in the below snippet if you want the darker portion of the ellipse to be visible.

    .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>