CODEWITHSUNDEEP
htmlcssradial-gradients
mkkhedawat
mkkhedawat

Reputation: 1717

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

I am trying to convert PSD into HTML using CSS.

I have a plain rectangle like this :

Plain Backgriund

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

Image Glow

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

final

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

Upvotes: 1

Views: 1144

Answers (2)

Harry
Harry

Reputation: 89770

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>

Upvotes: 4

Mehdi Brillaud
Mehdi Brillaud

Reputation: 1866

The only way I can see is to use a pseudo element and put a gradient background on it. I've made this quickly to show you but it does not reproduce exactly your image :

.rectangle {
  position: relative;
  width: 300px;
  height: 100px;
  background-color: #112D43;
}
.rectangle:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 40px;
  background: radial-gradient(ellipse at center, #094567 0%, rgba(0, 0, 0, 0) 50%);
}
<div class="rectangle"></div>

Upvotes: 4

Related Questions