Background with stars. Gradient

Question

Hello everybody.

I recently started studying gradients. But hit the Internet on a background image created using a gradient. Tell me how this can be done with a gradient. The whole brain has already broken.

My attempts:

.super-star { width: 300px; height: 300px; background: linear-gradient(126deg, #232927 4%, transparent 4%) -70px 43px, linear-gradient( 54deg, #232927 4%, transparent 4%) 30px 43px, linear-gradient( 18deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px, linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px, linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px, linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px, linear-gradient(126deg, #232927 4%, transparent 4%) -20px 93px, linear-gradient( 54deg, #232927 4%, transparent 4%) 80px 93px, linear-gradient( 18deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px, linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px, linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px, linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px; background-color: #232927; background-size: 100px 100px; }

 <div class="super-star"> </div>

and several other patterns on css3 lea.verou.me/css3patterns

user238931 · Accepted Answer · 2017-03-03T18:44:54

You have everything right, but you didn’t indicate the direction of the gradients.

 .super-star { width: 300px; height: 300px; background: linear-gradient(324deg, #232927 4%, transparent 4%) -70px 43px, linear-gradient( 36deg, #232927 4%, transparent 4%) 30px 43px, linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px, linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px, linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px, linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px, linear-gradient(324deg, #232927 4%, transparent 4%) -20px 93px, linear-gradient( 36deg, #232927 4%, transparent 4%) 80px 93px, linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px, linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px, linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px, linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px; background-color: #232927; background-size: 100px 100px; }

 <div class="super-star"> </div>

Not good to steal the code from the comments, my dear :) - Yuri
@Yuri, I didn't steal anything. Found on the picture on the Internet! - user238931
@Yuri, but the code is here, not the links) - Nick Volynkin ♦

Heidel heidel 2,672 7 35 89 · Answer 2 · 2017-03-03T18:55:29

Background with stars http://lea.verou.me/css3patterns/#stars and several other css3 patterns http://lea.verou.me/css3patterns/

Background with stars. Gradient

2 answers 2

More articles: