How to achieve glow element using CSS in plain div like described below?

Question

I am trying to convert PSD into HTML using CSS.

I have a plain rectangle like this :

Now a oval shape glow element : ( As in PSD )

Because of this if you look at only rectangle , With a glow at top it looks like below :

How to achieve the same ? Any lead is appreciated :)

Answer 1

Using Radial Gradients:

You can sort of achieve that by placing a radial-gradient image on top of your rectangle with the solid color. The positioning and size of the gradient may need to be modified to suit your needs.

The radial-gradient that I had used is very similar to the one in your PSD image. That is is starts from a bluish color and then gradually moves to transparent. This gradient is then positioned such that its center point is at 75% width of the parent and a distance that is 25% of the parent's height above it.

div {
  height: 200px;
  width: 400px;
  background-color: rgb(17, 45, 67);
  background-image: radial-gradient(ellipse at 75% -25%, rgb(14, 102, 150) 0%, transparent 50%);
  background-size: 100% 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div></div>

The main thing to worry with using radial-gradient is the relatively poor browser support.

---

Using Box Shadow:

Below is a slightly different approach using a pseudo-element and box-shadow. The box-shadow has a very high spread radius which produces a glow like effect.

This has better browser support than radial-gradient (even as low as IE8) but box-shadow cannot take values in percentage and hence this solution wouldn't be very useful for dynamic sized containers.

div {
  position: relative;
  width: 1280px;
  height: 480px;
  background-color: rgb(17, 45, 67);
  overflow: hidden;
}

div:after {
  position: absolute;
  content: '';
  right: 150px;
  top: -250px;
  height: 250px;
  width: 300px;
  border-radius: 50%;
  background: rgb(14, 102, 150);
  box-shadow: 25px 25px 150px 250px rgba(14, 102, 150, 0.5);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div></div>