css3 rainbow flag / gay pride flag

By greg On December 15, 2011 · Leave a Comment

made this a while back, and figured i’d share. it’s a rainbow flag / gay pride flag made entirely in css3:

#flag {
width: 450px;
height: 300px;
background-size: 100% 100%;
background-image: linear-gradient(bottom,
rgba(77,20,140,1) 0%,
rgba(77,20,140,1) 18%,
rgba(27,119,205,1) 18%,
rgba(27,119,205,1) 33%,
rgba(54,160,48,1) 33%,
rgba(54,160,48,1) 50%,
rgba(255,210,0,1) 50%,
rgba(255,210,0,1) 66%,
rgba(255,160,0,1) 66%,
rgba(255,160,0,1) 83%,
rgba(207,15,15,1) 83%,
rgba(207,15,15,1) 100%);
background-image: -o-linear-gradient(bottom,
rgba(77,20,140,1) 0%,
rgba(77,20,140,1) 18%,
rgba(27,119,205,1) 18%,
rgba(27,119,205,1) 33%,
rgba(54,160,48,1) 33%,
rgba(54,160,48,1) 50%,
rgba(255,210,0,1) 50%,
rgba(255,210,0,1) 66%,
rgba(255,160,0,1) 66%,
rgba(255,160,0,1) 83%,
rgba(207,15,15,1) 83%,
rgba(207,15,15,1) 100%);
background-image: -moz-linear-gradient(bottom,
rgba(77,20,140,1) 0%,
rgba(77,20,140,1) 18%,
rgba(27,119,205,1) 18%,
rgba(27,119,205,1) 33%,
rgba(54,160,48,1) 33%,
rgba(54,160,48,1) 50%,
rgba(255,210,0,1) 50%,
rgba(255,210,0,1) 66%,
rgba(255,160,0,1) 66%,
rgba(255,160,0,1) 83%,
rgba(207,15,15,1) 83%,
rgba(207,15,15,1) 100%);
background-image: -webkit-linear-gradient(bottom,
rgba(77,20,140,1) 0%,
rgba(77,20,140,1) 18%,
rgba(27,119,205,1) 18%,
rgba(27,119,205,1) 33%,
rgba(54,160,48,1) 33%,
rgba(54,160,48,1) 50%,
rgba(255,210,0,1) 50%,
rgba(255,210,0,1) 66%,
rgba(255,160,0,1) 66%,
rgba(255,160,0,1) 83%,
rgba(207,15,15,1) 83%,
rgba(207,15,15,1) 100%);
background-image: -ms-linear-gradient(bottom,
rgba(77,20,140,1) 0%,
rgba(77,20,140,1) 18%,
rgba(27,119,205,1) 18%,
rgba(27,119,205,1) 33%,
rgba(54,160,48,1) 33%,
rgba(54,160,48,1) 50%,
rgba(255,210,0,1) 50%,
rgba(255,210,0,1) 66%,
rgba(255,160,0,1) 66%,
rgba(255,160,0,1) 83%,
rgba(207,15,15,1) 83%,
rgba(207,15,15,1) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.00,rgba(77,20,140,1)),
color-stop(0.18,rgba(77,20,140,1)),
color-stop(0.18,rgba(27,119,205,1)),
color-stop(0.33,rgba(27,119,205,1)),
color-stop(0.33,rgba(54,160,48,1)),
color-stop(0.50,rgba(54,160,48,1)),
color-stop(0.50,rgba(255,210,0,1)),
color-stop(0.66,rgba(255,210,0,1)),
color-stop(0.66,rgba(255,160,0,1)),
color-stop(0.83,rgba(255,160,0,1)),
color-stop(0.83,rgba(207,15,15,1)),
color-stop(1.00,rgba(207,15,15,1))
);
}

here’s what it looks like: