CSS3 Gradient Effect

Complex gradient generator Address: http://www.colorzilla.com/gradient-editor/

Background gradient pattern Address: http://lea.verou.me/css3patterns/

Eg: two-color linear gradient

Background: #fcfcfc; /* Old browsers */
Background:-moz-linear-gradient (top, #fcfcfc 0, #ff0206 100%);/* ff3.6+ */
Background:-webkit-gradient (linear, left top, left bottom, Color-stop (0%, #fcfcfc), Color-stop (100%, #ff0206)); /* chrome,safari4+ */
Background:-webkit-linear-gradient (top, #fcfcfc 0, #ff0206 100%);/* chrome10+,safari5.1+ */
Background:-o-linear-gradient (top, #fcfcfc 0, #ff0206 100%);/* Opera 11.10+ */
Background:-ms-linear-gradient (top, #fcfcfc 0, #ff0206 100%);/* ie10+ */
Background:linear-gradient (to bottom, #fcfcfc 0, #ff0206 100%); * * *
Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #fcfcfc ', endcolorstr= ' #ff0206 ', gradienttype=0 ); /* ie6-9 */

Eg: two-color radial gradient

Background: #fcfcfc; /* Old browsers */
Background:-moz-radial-gradient (center, ellipse cover, #fcfcfc 0, #ff0206 100%);/* ff3.6+ */
Background:-webkit-gradient (radial, center center, 0px, center center, 100%, Color-stop (0%, #fcfcfc), Color-stop (100%,# ff0206)); /* chrome,safari4+ */
Background:-webkit-radial-gradient (center, ellipse cover, #fcfcfc 0, #ff0206 100%);/* chrome10+,safari5.1+ */
Background:-o-radial-gradient (center, ellipse cover, #fcfcfc 0, #ff0206 100%);/* Opera 12+ */
Background:-ms-radial-gradient (center, ellipse cover, #fcfcfc 0, #ff0206 100%);/* ie10+ */
Background:radial-gradient (ellipse at center, #fcfcfc 0, #ff0206 100%); * * *
Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #fcfcfc ', endcolorstr= ' #ff0206 ', gradienttype=1 ); /* ie6-9 fallback on horizontal gradient */

Eg: three-color linear gradient

Background: #fff2f2; /* Old browsers */
Background:-moz-linear-gradient (top, #fff2f2 0, #2e71f7 50%, #315263 100%);/* ff3.6+ */
Background:-webkit-gradient (linear, left top, left bottom, Color-stop (0%, #fff2f2), Color-stop (50%, #2e71f7), Color-stop (100%, #315263)); /* chrome,safari4+ */
Background:-webkit-linear-gradient (top, #fff2f2 0, #2e71f7 50%, #315263 100%);/* chrome10+,safari5.1+ */
Background:-o-linear-gradient (top, #fff2f2 0, #2e71f7 50%, #315263 100%);/* Opera 11.10+ * *
Background:-ms-linear-gradient (top, #fff2f2 0, #2e71f7 50%, #315263 100%);/* ie10+ */
Background:linear-gradient (to bottom, #fff2f2 0, #2e71f7 50%, #315263 100%); */*
Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #fff2f2 ', endcolorstr= ' #315263 ', gradienttype=0 ); /* ie6-9 */

Background gradient pattern--a lot of gossip gradient (very interesting OH):

Background
Radial-gradient (circle at 50% 59%, #D2CAAB 3, #364E27 4, #364E27 11%, Rgba (54,78,39,0) 12%, Rgba (54,78,39,0)) 50px 0,
Radial-gradient (circle at 50% 41%, #364E27 3, #D2CAAB 4, #D2CAAB 11%, Rgba (210,202,171,0) 12%, Rgba (210,202,171,0)) 50px 0,
Radial-gradient (circle at 50% 59%, #D2CAAB 3, #364E27 4, #364E27 11%, Rgba (54,78,39,0) 12%, Rgba (54,78,39,0)) 0 50px,
Radial-gradient (circle at 50% 41%, #364E27 3, #D2CAAB 4, #D2CAAB 11%, Rgba (210,202,171,0) 12%, Rgba (210,202,171,0)) 0 50 Px
Radial-gradient (circle at 100% 50%, #D2CAAB 16%, Rgba (210,202,171,0) 17%),
Radial-gradient (circle at 0% 50%, #364E27 16%, Rgba (54,78,39,0) 17%),
Radial-gradient (circle at 100% 50%, #D2CAAB 16%, Rgba (210,202,171,0) 17%) 50px 50px,
Radial-gradient (circle at 0% 50%, #364E27 16%, Rgba (54,78,39,0) 17%) 50px 50px;
Background-color: #63773F;
background-size:100px 100px;

CSS3 Gradient Effect