CODEWITHSUNDEEP
cssradial-gradients
S.Yankov
S.Yankov

Reputation: 107

How to make like this gradient sun effect using CSS?

Is there a way to make gradient like this originally at http://imgur.com/dA7RcsQ 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.

Upvotes: 1

Views: 4279

Answers (3)

user9996107
user9996107

Reputation: 33

three{
width:100%;
height:300px;
border:1px solid white;    
 background-image:radial-gradient( circle 80px at 25% 25% , rgb(255,255,255) 10%,rgba(251, 255, 185, .7), rgb(255,255,255) 60% 70%,rgb(2,153,218) 200%);}

If you want , change its position as your wish.

Upvotes: 0

Doooder
Doooder

Reputation: 159

Radial gradients are quite easy. Here's an example - 

#gradient {
height: 150px;
width: 150px;
background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Safari 5.1 to 6.0 */
background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* For Firefox 3.6 to 15 */
background: radial-gradient(farthest-side at 60% 55%,blue,green,yellow,black); /* Standard syntax (must be last) */
}

Documentation here - http://www.w3schools.com/css/css3_gradients.asp

Upvotes: 0

woestijnrog
woestijnrog

Reputation: 1579

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>

Upvotes: 4

Related Questions