• 1
  • 2
Home > Tips

How to Make CSS3 Gradient in the fastest way?

By using gradient effect, the designers can create the beautiful effect just like the rainbow. In the past, designers have to using external images to achieve this kind of effect. But now there are many new css3 image effects offered to designers, you can easily achieve gradient effect by CSS3.

 

 

To get the moz linear gradient effect above, we can define CSS3 like that:

background-image: -moz-linear-gradient(top, #8fa1ff, #3757fa); /* Firefox */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff4f02), color-stop(1, #8f2c00)); /* Saf4+, Chrome */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c6ff00', endColorstr='#538300', GradientType='0'); /* IE*/

 

 moz linear gradient

We need three parameters to define the moz linear gradient:

1. The direction of moz linear gradient:

top defines the gradient direction will be started from top to bottom.
left defines the gradient direction will be started from left to right.

2. The start color

3. The end color

You can also add more parameters to define multiple colors gradient.

 

 webkit gradient

We need five parameters to define webkit gradient.

The First parameter defines gradient type which can be linear or radial.

The second parameter and the third parameter are both two pair of values, which define the start point and the end point respectively. These two pair of values can be specified by coordinates or key values.

The forth and the fifth parameter are color-stop functions. Color-stop functions accept two functions: the first function defines the gradient position (0 is the start point, 0.5 is the middle point and 1 is the end point). The second parameter defines the color of corresponding point. IE can achieve gradient effect by filter. startColorstr defines the color of start point and endColorstr defines the color of end point. GradientType defines the gradient type(0 is default value, which indicates Vertical gradient. 1 indicates Horizontal gradient.).

 

 Use from() and to() to specify the color transition point in linear gradient

 

 

 background: -webkit-gradient(linear, left top, left bottom, from(#96ff00), color-stop(0.5, orange), to(rgb(255, 0, 0)));

 

 Multiple transition points in the same position in linear gradient

 

 

 background:-webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00));

 

 Radial Gradient effect

 

 

 background: -moz-radial-gradient(30px 30px, circle farthest-corner, #58ff00 0%, rgba(222, 255, 0, 0) 30%),
-moz-radial-gradient(50px 70px, circle farthest-corner, #F30 0%, rgba(255, 159, 34, 0) 60%),
-moz-radial-gradient(80px 10px, circle farthest-corner, #03F 0%, rgba(222, 255, 0, 0) 80%);
background:-webkit-gradient(radial, 105 105, 20, 112 120, 50, from(#ff5f98), to(rgba(255,1,136,0)), color-stop(75%, #ff0188)),
-webkit-gradient(radial, 95 15, 15, 102 20, 40, from(#00c9ff), to(rgba(0,201,255,0)), color-stop(80%, #00b5e2)),
-webkit-gradient(radial, 0 150, 50, 0 140, 90, from(#f4f201), to(rgba(228, 199,0,0)), color-stop(80%, #e4c700));

 

 

 Contact Us for Help

If you cannot find a proper solution to your issue through the above methods, our support team is always on standby for whatever problems youve got. We promise to you we will deal with your issues within 24 hours. Contact Our Support Team

Choose a SliceMaker Product to Create a Website on Your Own-30 Day Freetrial
SliceMaker Standard V3.6 - Freeware
SliceMaker Standard V3.6 - Freeware
The anyone-can-master webpage making software. You can create exceptional webpage/website on your own even if you're unfamiliar with webpage making.
$0
$0
SliceMaker Platinum V3.6 - Freeware
SliceMaker Platinum V3.6 - Freeware
The bestselling webpage making software, helps you create exceptional webpage/website without writing complicated CSS and DIV codes.
$0
$0
SliceMaker Deluxe V3.6 - Freeware
SliceMaker Deluxe V3.6 - Freeware
The all-in-one webpage making software, helps you create webpage/website of any style. It's the idea tool to create webpage/website.
$0
$0