How to make a CSS background gradient (gradient)?

Asked

Viewed 6,243 times

3

How do I do in CSS with which three div have the background gradient (gradient) changing color green for yellow and finally blue, being the first from top to bottom, the second from left to right and the third radial? Preferably a code that is valid in most browsers.

HTML:

<div class='conjunto'>
    <div></div>
    <div></div>
    <div></div>
</div>
css background colors

  • That sounds like homework question :P

  • Hahaha, it’s a recurring question for Google paratroopers :)

  • And it’s still a semi-duplicate http://answall.com/questions/32800 :P - the colours of the flag of Portugal have yet to be made :)

  • @Bacco I had even searched before but had not seen this, lucky that your link asks solution in Javascript :P

  • 2

    Although the duplicate is considered more by the answers, even if the question is a little different. But as yours is more complete, I think you can only consider "semi" duplicate even, mainly by using more colors and shapes. (so probably none of the visitors will want to vote to close :).

2 answers

6


Here is a possibility:

.conjunto div:nth-child(1) {
  background: -webkit-linear-gradient(green, yellow, blue); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(green, yellow, blue); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(green, yellow, blue); /* For Firefox 3.6 to 15 */
  background: linear-gradient(green, yellow, blue); /* Standard syntax */
}
.conjunto div:nth-child(2) {
  background: -webkit-linear-gradient(left, green, yellow, blue); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, green, yellow, blue); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, green, yellow, blue); /* For Firefox 3.6 to 15 */
  background: linear-gradient(right, green, yellow, blue); /* Standard syntax */
}
.conjunto div:nth-child(3) {
  background: -webkit-radial-gradient(green, yellow, blue); /* For Safari 5.1 to 6.0 */
  background: -o-radial-gradient(green, yellow, blue); /* For Opera 11.1 to 12.0 */
  background: -moz-radial-gradient(green, yellow, blue); /* For Firefox 3.6 to 15 */
  background: radial-gradient(green, yellow, blue); /* Standard syntax */
}

.conjunto div {
    width: 400px;
    height: 200px;
}

jsFiddle: https://jsfiddle.net/2uogtubn/

Actually w3schools has a good page about this, the MDN also, but basically the syntax is:

background: linear-gradient(direction, cor_1, cor_2, ...);

3

This tool (Ultimate CSS Gradient Color Generator) is a hand in the wheel when generating these gradients. The code it generates is compatible with several browsers.

An example of the code generated with what you asked:

.conjunto div {
  width: 150px;
  height: 100px;
  margin-left: 5px;
  float: left;
}

.conjunto div:nth-child(1) {
    background: #00ff00; /* Old browsers */
    background: -moz-linear-gradient(top,  #00ff00 0%, #ffff00 50%, #0000ff 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00ff00), color-stop(50%,#ffff00), color-stop(100%,#0000ff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #00ff00 0%,#ffff00 50%,#0000ff 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #00ff00 0%,#ffff00 50%,#0000ff 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #00ff00 0%,#ffff00 50%,#0000ff 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #00ff00 0%,#ffff00 50%,#0000ff 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ff00', endColorstr='#0000ff',GradientType=0 ); /* IE6-9 */;
}

.conjunto div:nth-child(2) {
    background: #0000ff; /* Old browsers */
    background: -moz-linear-gradient(left,  #0000ff 0%, #ffff00 50%, #00ff00 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#0000ff), color-stop(50%,#ffff00), color-stop(100%,#00ff00)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #0000ff 0%,#ffff00 50%,#00ff00 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #0000ff 0%,#ffff00 50%,#00ff00 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #0000ff 0%,#ffff00 50%,#00ff00 100%); /* IE10+ */
    background: linear-gradient(to right,  #0000ff 0%,#ffff00 50%,#00ff00 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000ff', endColorstr='#00ff00',GradientType=1 ); /* IE6-9 */;
}

.conjunto div:nth-child(3) {
    background: #0000ff; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover,  #0000ff 0%, #ffff00 50%, #00ff00 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#0000ff), color-stop(50%,#ffff00), color-stop(100%,#00ff00)); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover,  #0000ff 0%,#ffff00 50%,#00ff00 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover,  #0000ff 0%,#ffff00 50%,#00ff00 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover,  #0000ff 0%,#ffff00 50%,#00ff00 100%); /* IE10+ */
    background: radial-gradient(ellipse at center,  #0000ff 0%,#ffff00 50%,#00ff00 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000ff', endColorstr='#00ff00',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */;
}
<div class='conjunto'>
    <div></div>
    <div></div>
    <div></div>
</div>

Browser other questions tagged css background colors

You are not signed in. Login or sign up in order to post.