Box mit linearem Farbverlauf (vertikal)
.box {
background: -moz-linear-gradient(top, #87e0fd 0%, #05abe0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(100%,#05abe0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #87e0fd 0%,#05abe0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #87e0fd 0%,#05abe0 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #87e0fd 0%,#05abe0 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #87e0fd 0%,#05abe0 100%); /* W3C */
}
Box mit linearem Farbverlauf (horizontal)
.box {
background: -moz-linear-gradient(left, #a7cfdf 0%, #23538a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#a7cfdf), color-stop(100%,#23538a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #a7cfdf 0%,#23538a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #a7cfdf 0%,#23538a 100%); /* Opera11.10+ */
background: -ms-linear-gradient(left, #a7cfdf 0%,#23538a 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=1 ); /* IE6-9 */
background: linear-gradient(left, #a7cfdf 0%,#23538a 100%); /* W3C */
}
Box mit linearem Farbverlauf und Hintergrundbild (keine Unterstützung von IE9)
.box {
width:300px;
height:300px;
-moz-border-radius: 20px;
-webit-border-radius: 20px;
border-radius: 20px;
-moz-box-shadow: inset 0 0 10px #555;
-webkit-box-shadow: inset 0 0 10px #555;
box-shadow: inset 0 0 10px #555;
background: url(image.jpg) center no-repeat, rgb(254,252,234);
background: url(image.jpg) center no-repeat, -moz-linear-gradient(top, rgba(254,252,234,1) 0%, rgba(241,218,54,1) 100%);
background: url(image.jpg) center no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,252,234,1)), color-stop(100%,rgba(241,218,54,1)));
background: url(image.jpg) center no-repeat, -webkit-linear-gradient(top, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%);
background: url(image.jpg) center no-repeat, -o-linear-gradient(top, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%);
background: url(image.jpg) center no-repeat, -ms-linear-gradient(top, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%);
background: url(image.jpg) center no-repeat, linear-gradient(top, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%);
}
Box mit linearem Farbverlauf (vertikal) und Stop bei 50%
.box {
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
}
Radialer Farbverlauf (eliptisch)
.box {
width:600px;
height:200px;
margin:20px auto;
-moz-border-radius: 10px;
-webit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 0 10px #777;
-webkit-box-shadow: 0 0 10px #777;
box-shadow: 0 0 10px #777;
background-image: -ms-radial-gradient(center, ellipse farthest-corner, #FFE924 0%, #853100 100%);
background-image: -moz-radial-gradient(center, ellipse farthest-corner, #FFE924 0%, #853100 100%);
background-image: -o-radial-gradient(center, ellipse farthest-corner, #FFE924 0%, #853100 100%);
background-image: -webkit-gradient(radial, center center, 0, center center, 510, color-stop(0, #FFE924), color-stop(1, #853100));
background-image: -webkit-radial-gradient(center, ellipse farthest-corner, #FFE924 0%, #853100 100%);
background-image: radial-gradient(center, ellipse farthest-corner, #FFE924 0%, #853100 100%);
}
Box mit radialem Farbverlauf (keine Unterstützung von IE9)
.box {
background: -moz-radial-gradient(center, #ffffff, #2989D8); /* FF3.5+ */
background: -webkit-gradient(radial, center center, 40, center center, 200, from(#ffffff), to(#2989D8)); /* Saf3.1+, Chrome */
background: -wekit-radial-gradient(center, #ffffff, #2989D8); /* Chrome10+, Safari 5.1+ */
background: -o-radial-gradient(center, #ffffff, #2989D8); /* Opera 11.10+ */
background: -ms-radial-gradient(center, #ffffff, #2989D8); /* IE10+ */
background: radial-gradient(center, #ffffff, #2989D8); /* W3C */
}
Box mit radialem Farbverlauf (keine Unterstützung von IE9)
.box {
background: -webkit-radial-gradient(50% 50%,circle closest-side,#FFF,#FFF 25%,#000 50%,#FFF 75%,#000);
background: -moz-radial-gradient(50% 50%,circle closest-side,#FFF,#FFF 25%,#000 50%,#FFF 75%,#000);
background: -o-radial-gradient(50% 50%,circle closest-side,#FFF,#FFF 25%,#000 50%,#FFF 75%,#000);
background: -ms-radial-gradient(50% 50%,circle closest-side,#FFF,#FFF 25%,#000 50%,#FFF 75%,#000);
background: radial-gradient(50% 50%,circle closest-side,#FFF,#FFF 25%,#000 50%,#FFF 75%,#000);
}
Ein horizontaler Farbverlauf in die Tranparenz (keine Unterstützung von IE9)
.box {
background: -moz-linear-gradient(left, #999999 0%, transparent 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#999999), color-stop(100%,transparent)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #999999 0%,transparent 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #999999 0%,transparent 100%); /* Opera11.10+ */
background: -ms-linear-gradient(left, #999999 0%,transparent 100%); /* IE10+ */
background: linear-gradient(left, #999999 0%,transparent 100%); /* W3C */
}
Doppelter Hintergrund mit Farbverlauf in Transparenz
.box {
position: relative;
width:600px;
height:300px;
-moz-border-radius: 10px;
-webit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 0 10px #777;
-webkit-box-shadow: 0 0 10px #777;
box-shadow: 0 0 10px #777;
background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 10%, rgba(255,255,255,0) 100%), url(../images/br_bg.jpg);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(10%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))), url(../images/br_bg.jpg);
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 10%,rgba(255,255,255,0) 100%), url(../images/br_bg.jpg);
background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 10%,rgba(255,255,255,0) 100%), url(../images/br_bg.jpg);
background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 10%,rgba(255,255,255,0) 100%), url(../images/br_bg.jpg);
background: linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 10%,rgba(255,255,255,0) 100%), url(../images/br_bg.jpg);
}
.box .logo {
background: url(br_logo.png);
position: absolute;
top: 46px;
left: 10px;
width: 386px;
height: 207px;
}