What’s up guys. Carlton Stith here and I’m back to discuss how to create CSS3 radial gradients. That’s right boys and girls. We’re going to use just the stuff that’s already built in with our rendering engines. If you read my previous post where I discussed CSS3 linear gradients, then the process may already seem familiar to you.
CSS3 is backwards compatible with earlier versions of CSS.
Once again, we will rely on CSS3 only and toss images out the window…a window that’s on the first floor. As a fallback, you will have to use a solid color or re-create the radial gradient in the form of an image using Photoshop or Fireworks for non-modern browsers.
Let’s start things off with a basic div. Nothing special here, right? Divs, on their own, are meaningless so, I’m going to call each div a letter of the alphabet and give them classes. In our CSS, we are going to call on these divs and give them some styles.
Let’s style our divs and create a rounded rectangle with a bit of box-shadow for good measure. Our shape can be a circle or ellipse. Our shapes can be used in various combinations. Keep in mind that we will be moving from the center outward to create our gradient. The size of our gradients can take one of the following 6 values:
- closest-side
- closest-corner
- farthest-side
- farthest-corner
- curtain
- cover
Feel free to use color names (ie. black, green, etc.), hexadecimals, RGBA (RGBa) and HSL (HSLa) to create the colors and stops.
What We Have Created
.gradientA – Nothing special with this radial gradient. Feel free to use transparent also.
.gradientB – This is the radial gradient with more than two colors.
.gradientC – Here we are going to give the radial gradient a shape. Pretty cool, huh?
.gradientD – In this example, we are going to give our gradient some positioning. You can specify top, bottom, right or left.
.gradientE – In this example, we are going to give our gradient some positioning with a twist and place the gradient in the corner. You can specify top, top left, bottom, bottom right, etc. We can also position our gradients using percentages or pixels.
.gradientF – The position and size can also be controlled by using percentages to give your x and y coordinates a bit more flexibility.
.gradientG – We can include color stops to control the size of the radius by using em’s, percentages or pixels.
.gradientH – Here we’re going to repeat the radial gradient. This is accomplished by including the word “repeating” before radial gradient.
.gradientI – We can also use ellipse for our shape.
Our Results
Syntaxes for Web Engines
If you plan on using radial-gradient in your markup, you have to include the vendor prefixes or else web engines might have trouble reading it. The syntaxes for the various web engines are as follows:
-
Firefox: -moz-
-
Safari and Chrome: -webkit-
-
Opera: -o-
-
Internet Explorer: -ms-
Further Reading
Radial Gradients explained by The Mozilla Developer Network
Resource to stay up-to-date with the various syntaxes
David Walsh explains how to create circles