In this tutorial, I will show you a simple use of the radial-gradient.
Read the documentation here.
I used the codepen online editor and you can see my example online.
First, you need to create a div tag into HTML5 area and add a class named circles:
1 | <div class="circles"></div> |
Into the CSS area you need to fix this background area and create the circles with this class:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | * { margin:0px; padding:0px; } body { background-size: 76px 76px; } .circles { position:absolute; display:block; width:100%; height:100%; background-color:black; background-image: repeating-radial-gradient( transparent, transparent 5px, rgba(0,0,255,1), transparent 8px); background-size:100px 100px, 100px 100px, 76px 76px, 76px 76px; background-position:center; } |
The result can be see into the next frame:
See the Pen
the_gradient_CSS3_001 by Cătălin George Feștilă (@catafest)
on CodePen.