YouTipCss3 Gradients
# CSS3 Gradients
* * *
Gradient Effects
* * *
CSS3 gradients allow you to display smooth transitions between two or more specified colors.
Previously, you had to use images to achieve these effects. However, by using CSS3 gradients, you can reduce download times and bandwidth usage. Additionally, gradient elements look better when zoomed in, as the gradient is generated by the browser.
CSS3 defines two types of gradients:
* **Linear Gradients - go down/up/left/right/diagonally**
* **Radial Gradients - defined by their center**
Linear gradient related property: (#).
Online linear gradient tool: .
* * *
## Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | | | | | |
| --- | --- | --- | --- | --- | --- |
| background-image | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
**Note:** IE8 and earlier versions of IE do not support this property.
* * *
To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions between. You can also set a start point and a direction (or an angle).
**Linear Gradient Examples:**
### Syntax
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
**Linear Gradient - Top to Bottom (This is default)**
The following example demonstrates a linear gradient that starts at the top. It starts red, transitioning to blue:
## Example
Linear gradient from top to bottom:
#grad{background-image:linear-gradient(#e66465, #9198e5); }
[Try it Yourself »](#)
**Linear Gradient - Left to Right**
The following example demonstrates a linear gradient that starts from the left. It starts red, transitioning to yellow:
## Example
Linear gradient from left to right:
#grad{height:200 px; background-image:linear-gradient(to right, red , yellow); }
[Try it Yourself »](#)
**Linear Gradient - Diagonal**
You can make a diagonal gradient by specifying both the horizontal and vertical starting positions.
The following example demonstrates a linear gradient that starts at the top left (and goes to the bottom right). It starts red, transitioning to yellow:
## Example
Linear gradient from top left to bottom right:
#grad{height:200 px; background-image:linear-gradient(to bottom right, red, yellow); }
[Try it Yourself »](#)
* * *
## Using Angles
If you want more control over the direction of the gradient, you can define an angle, instead of predefined directions (to bottom, to top, to right, to left, to bottom right, etc.).
### Syntax
background-image: linear-gradient(angle, color-stop1, color-stop2);
The angle is specified between the horizontal line and the gradient line, calculated counter-clockwise. In other words, 0deg creates a gradient from bottom to top, 90deg creates a gradient from left to right.
!(#)
However, note that many browsers (Chrome, Safari, firefox, etc.) have used the old standard where 0deg creates a gradient from left to right, and 90deg creates a gradient from bottom to top. The conversion formula is **90 - x = y** where x is the standard angle and y is the non-standard angle.
The following example demonstrates how to use an angle on a linear gradient:
## Example
Linear gradient with a specified angle:
#grad{background-image:linear-gradient(-90 deg, red, yellow); }
[Try it Yourself »](#)
* * *
## Using Multiple Color Stops
The following example demonstrates how to set multiple color stops:
## Example
Linear gradient from top to bottom with multiple color stops:
#grad{background-image:linear-gradient(red, yellow, green); }
[Try it Yourself »](#)
The following example demonstrates how to create a linear gradient with rainbow colors and text:
## Example
#grad{background-image:linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); }
[Try it Yourself »](#)
* * *
## Using Transparency
CSS3 gradients also support transparency, which can be used to create fading effects.
To add transparency, we use the rgba() function to define the color stops. The last parameter in the rgba() function can be a value from 0 to 1, and it defines the transparency of the color: 0 means fully transparent, 1 means fully opaque.
The following example demonstrates a linear gradient that starts from the left. It starts fully transparent, transitioning to fully opaque red:
## Example
Linear gradient from left to right, with transparency:
#grad{background-image:linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); }
[Try it Yourself »](#)
* * *
## Repeating Linear Gradient
The repeating-linear-gradient() function is used to repeat a linear gradient:
## Example
A repeating linear gradient:
#grad{background-image:repeating-linear-gradient(red, yellow 10%, green 20%); }
[Try it Yourself »](#)
* * *
## CSS3 Radial Gradients
Radial gradients are defined by their center.
To create a radial gradient you must also define at least two color stops. Color stops are the colors you want to render smooth transitions between. You can also specify the center, shape (circle or ellipse), and size of the gradient. By default, the gradient's center is center (meaning at the center), the gradient's shape is ellipse (meaning elliptical), and the gradient's size is farthest-corner (meaning to the farthest corner).
**Radial Gradient Examples:**
### Syntax
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
**Radial Gradient - Evenly Spaced Color Stops (This is default)**
## Example
Radial gradient with evenly spaced color stops:
#grad{background-image:radial-gradient(red, yellow, green); }
[Try it Yourself »](#)
**Radial Gradient - Differently Spaced Color Stops**
## Example
Radial gradient with differently spaced color stops:
#grad{background-image:radial-gradient(red 5%, yellow 15%, green 60%); }
[Try it Yourself »](#)
* * *
## Setting Shape
The shape parameter defines the shape. It can take the value circle or ellipse. Where, circle means circular, and ellipse means elliptical. The default value is ellipse.
## Example
Radial gradient with shape of circle:
#grad{background-image:radial-gradient(circle, red, yellow, green); }
[Try it Yourself »](#)
* * *
## Use of Different Size Keywords
The size parameter defines the size of the gradient. It can take four values:
* **closest-side**
* **farthest-side**
* **closest-corner**
* **farthest-corner**
## Example
Radial gradient with different size keywords:
#grad1{background-image:radial-gradient(closest-side at 60%55%, red, yellow, black); }#grad2{background-image:radial-gradient(farthest-side at 60%55%, red, yellow, black); }
[Try it Yourself »](#)
* * *
## Repeating Radial Gradient
The repeating-radial-gradient() function is used to repeat a radial gradient:
## Example
A repeating radial gradient:
#grad{background-image:repeating-radial-gradient(red, yellow 10%, green 15%); }
[Try it Yourself »](#)