Compass Gradient Test

compass-linear-gradient-test.scss

@import "compass/css3/images";

.test {
  @include background(linear-gradient(top left, #333, #0c0),
                      radial-gradient(#c00, #fff 100px));

  width: 100%;
  height: 500px;
}

screen.css

/* OUTPUT FROM COMPASS BASED ON THE ABOVE SCSS FILE */

/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
/* line 8, ../sass/screen.scss */
.test {
  background: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #333333), color-stop(100%, #00cc00)), -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #cc0000), color-stop(100%, #ffffff));
  background: -webkit-linear-gradient(top left, #333333, #00cc00), -webkit-radial-gradient(#cc0000, #ffffff 100px);
  background: -moz-linear-gradient(top left, #333333, #00cc00), -moz-radial-gradient(#cc0000, #ffffff 100px);
  background: -o-linear-gradient(top left, #333333, #00cc00), -o-radial-gradient(#cc0000, #ffffff 100px);
  background: -ms-linear-gradient(top left, #333333, #00cc00), -ms-radial-gradient(#cc0000, #ffffff 100px);
  background: linear-gradient(top left, #333333, #00cc00), radial-gradient(#cc0000, #ffffff 100px);
  width: 100%;
  height: 500px;
}