Gradients Demo

dabblet.css

/* Gradients Demo */

.g1{
background: linear-gradient(#fb3 50%, #58a 50%);
background-size: 100% 30px;
background-repeat: no-repeat;
width: 200px;
height:200px;
margin: 20px;
}

.g2{
background: linear-gradient(#fb3 30%, #58a 30%);
background-size: 100% 30px;
width: 200px;
height:200px;
margin: 20px;
}

.g3{
background: linear-gradient(#fb3 30% , #58a 0 );
width: 200px;
height:200px;
margin: 20px;
}

.dg1{
background: linear-gradient(45deg,#fb3 50%, #58a 0);
background-size: 300px 300px;
background-repeat: no-repeat;
width: 200px;
height:200px;
margin: 20px;
}

.dg2{
background: linear-gradient(45deg,
			#fb3 25%, #58a 0, #58a 50%,  
            #fb3 0, #fb3 75%, #58a 0);
background-size: 300px 300px;
background-repeat: no-repeat;
width: 200px;
height:200px;
margin: 20px;
}

.dg3{
background: #58a;
background-image: repeating-linear-gradient(30deg,
                  hsla(0,0%,100%,.1), 
                  hsla(0,0%,100%,.1) 15px, 
                  transparent 0, transparent 30px);
width: 200px;
height:200px;
margin: 20px;
}

dabblet.html

<!-- Demo On CSS Gradients
-->
<div class="g1"></div>
<div class="g2"></div>
<div class=" g3"></div>
<div class="dg1"></div>
<div class="dg2"></div>
<div class="dg3"></div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}