How to make like this gradient sun effect using CSS?

Question

Is there a way to make gradient like this with css only?

I've tried to use background-position tag

But it didn't work for me probably because I don't know how sprites work.

Answer 1

It's a straightforward radial gradient. This should put you on the right track.

• circle 150px says it's a circular gradient with radius 150px
• at 25% 33% defines the origin (I've eyeballed it 1/4 from the left and 1/3 from the top) You can also use px or other lengths.
• Finally give the colors from the center out.

div{
  height: 200px;
  border: 1px solid;
  background-image: radial-gradient(circle 150px at 25% 33%, white, yellow, lightyellow, aqua);
}

  <div></div>