Creating as background that uses a gradient can really make your site look professional, but there are some issues that can come up. There are many different types of gradients that can be used, with all manner of settings, which allows you to create some really interesting background images.
I wanted to create some type of "rays from the sun" like gradient and hit upon an interesting problem, and created a simple solution. First, the problem and how to create the gradient.
background: repeating-conic-gradient( black 0deg 10deg, white 10deg 20deg);
To create the effect I was looking for required me to use the repeating-conic-gradient CSS function.
This allows you to create a gradient of changing colors depending on the angle it is at against a virtual line pointing
from the center going directly up, rotating clockwise.
I wanted to move from one color to the next in steps, not in a gradual changing of colors between the two, but one solid
single color at a time.
This was done by stating what color I wanted and the angles they would be used with.
A type of start angle and end angle.
From the example above, we have a solid black from 0 degrees to 10 degrees, then white from 10 degrees to 20 degrees. This is then repeated throughout all 360 degrees of the circle. The end result are repeating black and white rays from the center.
On high resolution smartphones and tablets this can look good enough, but on PCs, you will see blocky pixels. The pixels are either black or white, and at the edge between the two colors it will look jagged, not smooth at all.
So, how do we make it look smooth? Let's take a look at the solution first and go through what is happening.
background: repeating-conic-gradient( black 0deg 9deg, black 9deg, white 10deg, white 10deg 19deg, white 19deg, black 20deg);
We have added some extra gradient color stops, some with 2 angles given, some with only one.
| 0 to 9 degrees | Solid black | |
|
9 degrees 10 degrees |
Change from black to white between 9 to 10 degrees | |
| 10 to 19 degrees | Solid white | |
|
19 degrees 20 degrees |
Change from white to black between 19 to 20 degrees |
For most of the gradient we are sticking to a solid black or white color. Between the black and white parts we are allowing the gradient to create a smooth transition between to the two colors. At angle 9 degrees we have set it to black, and at 10 degrees we have set it to white. For this one degree it will use shades of gray between black and white, making the pixels look smoother.
This was used in the <background-rotating-fans> web component.
I added some CSS variables to allow for more control over the ray sizes.
It rotates too. Take a look.