enter image description here

Does anyone have any idea how to create effects like in the picture? (Corners of the background and glare of light)

  • one
    background with big z-index pictures - Jean-Claude
  • @ Jean-Claude, I don’t think the angles are different, but glare? If you play with the shadows? But then again, the extra blocks do not carry the semantic load ..... - pepel_xD
  • A stack of gradients + habr - Qwertiy ♦

1 answer 1

To generate flare, you can use the Ultimate CSS Gradient Generator or analogues:

div { width: 200px; height: 200px; background: #ffffff; /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, #ffffff 13%, #a3c7e2 15%, #a3c7e2 30%, #7db9e8 34%, #7db9e8 36%, #a3c7e2 40%, #a3c7e2 42%, #7db9e8 46%, #7db9e8 60%, #a3c7e2 63%, #7db9e8 65%); /* FF3.6-15 */ background: -webkit-radial-gradient(center, ellipse cover, #ffffff 13%,#a3c7e2 15%,#a3c7e2 30%,#7db9e8 34%,#7db9e8 36%,#a3c7e2 40%,#a3c7e2 42%,#7db9e8 46%,#7db9e8 60%,#a3c7e2 63%,#7db9e8 65%); /* Chrome10-25,Safari5.1-6 */ background: radial-gradient(ellipse at center, #ffffff 13%,#a3c7e2 15%,#a3c7e2 30%,#7db9e8 34%,#7db9e8 36%,#a3c7e2 40%,#a3c7e2 42%,#7db9e8 46%,#7db9e8 60%,#a3c7e2 63%,#7db9e8 65%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } 
 <div></div>