Gradient in CSS3: Circular and Elliptical
Today we are going to continue our discussion on CSS3 Gradients. In the previous post we’ve showed you how to create a radial type of gradient: Linear Gradients. This time we will cover their relative, Circular and Elliptical Gradients.
the Gradient Syntax
The gradient in CSS3 is declared using the background-image
property. This is for better compatibility when we also need to add background-color
in a single rule set, so that they do not collide with one another. Then, to create the radial gradient we simply call it with this radial-gradient()
function. There are four values to be included in the function to set the gradient properly.
The first value defines the gradient position. We can use a descriptive keyword such as top, bottom, center and left, or we can also be more specific like, 50% 50%
to set the gradient at the center or 0% 0%
to set the gradient to start at top left
.
The second value defines the shape and the gradient size, there are two arguments to shape the gradients, first the ellipse
which is the default, and the second is circle
.
And for the gradient size, we can select one of the following six arguments.
Values | Description |
---|---|
closest-side |
The gradient’s shape meets the side of the box closest to its center (for circles) or meets both the vertical and horizontal sides closest to the center (for ellipses). |
closest-corner |
The gradient’s shape is sized so it exactly meets the closest corner of the box from its center. |
farthest-side |
Similar to closest-side, except the shape is sized to meet the side of the box farthest from its center (or vertical and horizontal sides). |
farthest-corner |
The gradient’s shape is sized so it exactly meets the farthest corner of the box from its center. |
contain |
A synonym for |
cover |
A synonym for |
Table Source: Mozilla Developer Network.
Lastly, the third and the fourth define the color combination. So, here is how we write the syntax to create the Elliptical gradients, and this time we will use cover
for the gradient size, so it will spread widely, covering the container;
body { background-image: radial-gradient(center center, ellipse cover, #ffeda3, #ffc800); }
To create the Circular gradient we can simply do it this way:
body { background-image: radial-gradient(center center, circle cover, #ffeda3, #ffc800); }
As the name implies, the gradient shape will be a circle.
Browser Support
Just take note though, all the browsers are still in the process of providing full support for this feature, so they still need the vendor prefix. Thus, the whole complete syntax that will work in all modern browsers – IE10+, Firefox 3.6+, Chrome 4.0+, Safari 4.0+ and Opera 11+ – will look something like this;
body { background-image: radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800); background-image: -o-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800); background-image: -ms-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800); background-image: -moz-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800); background-image: -webkit-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800); }
Check out the demo or download the source to play around with gradients.
Final Words
Creating CSS3 radial gradient is not as hard as you think, and especially when you get help from these tools for generating code:
Radial gradient is only one type of CSS3 gadients, we will continue our discussion on the subject in future posts, so stay tuned to Hongkiat.com
Related posts:
- A Look Into: CSS3 Linear Gradient
- Coding a Graceful Breadcrumb Navigation Menu in CSS3
- CSS3 Border-Image Property: Making Photos Really Cool!
- CSS3 Attribute Selector: Targeting the File Type
via hongkiat.com http://www.hongkiat.com/blog/css3-circular-elliptical-gradient/