Градиенты CSS

Линейный градиент

div {
    background: #000000; /* Old browsers */
    background: -moz-linear-gradient(top, #000000 0%, #00ff00 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #000000 0%,#00ff00 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #000000 0%,#00ff00 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00ff00',GradientType=0 ); /* IE6-9 */
}
div {
    background: linear-gradient(to right, #ff0000 0%,#0000ff 50%,#ffff00 100%);
}
div {
    background: linear-gradient(135deg, #000284 0%,#ff00bb 100%);
}

Радиальный градиент

div {
    background: radial-gradient(100px at 50% 50%, #00878e 0%,#d16800 100%);
}
Online генератор