Gradient Tester

by BinaryAcid

HTML

<script src="http://jslib.dotcloud.com/fiddle-require.js"></script>
<div id="grad1">
</div>

<div id="grad2">
</div>

CSS

#grad1, #grad2 {
    height: 200px;
    width: 400px;
    margin: 10px;
}

#grad1 {
    background-color: #999999;
    background-image: -o-linear-gradient(90deg , rgb(153,153,153) 0%, rgb(255,255,255) 100%);
    background-image: -moz-linear-gradient(90deg , rgb(153,153,153) 0%, rgb(255,255,255) 100%);
    background-image: -webkit-linear-gradient(90deg , rgb(153,153,153) 0%, rgb(255,255,255) 100%);
    background-image: -ms-linear-gradient(90deg , rgb(153,153,153) 0%, rgb(255,255,255) 100%);
    background-image: linear-gradient(90deg , rgb(153,153,153) 0%, rgb(255,255,255) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#999999');
}

#grad2 {
    background-color: #1E3561;
    background-image: -o-linear-gradient(60deg , rgb(30,53,97) 0%, rgb(60,101,180) 70%);
    background-image: -moz-linear-gradient(60deg , rgb(30,53,97) 0%, rgb(60,101,180) 70%);
    background-image: -webkit-linear-gradient(60deg , rgb(30,53,97) 0%, rgb(60,101,180) 70%);
    background-image: -ms-linear-gradient(60deg , rgb(30,53,97) 0%, rgb(60,101,180) 70%);
    background-image: linear-gradient(60deg , rgb(30,53,97) 0%, rgb(60,101,180) 70%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3C65B4', endColorstr='#1E3561');
    
    -moz-box-shadow: 5px 7px 7px #c4c5c7;
    -webkit-box-shadow: 5px 7px 7px #c4c5c7;
    box-shadow: 5px 7px 7px #c4c5c7;
}