CSS background radial-gradient


<div class="main-container page-main-promo">
</div>
.main-container.page-main-promo {
    background: radial-gradient(ellipse at center center , #1A56AE 0%, #0C2952 100%) repeat scroll 0 0 transparent;
    max-width: 999999px;
    min-width: 0;
    position: relative;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.25);
}

.main-container {
    min-height: 100%;
    overflow: hidden;
    width: 100%;
}

*::-moz-selection {
    background: none repeat scroll 0 0 #3195F9;
    color: #FFFFFF;
    text-shadow: none;
}

пример: hostels.dp.ua
CSS background radial-gradient

2-ой способ с помощь SVG-градиента. На body вешаем:

body {
    background: url("../images/gradientblue_img.svg") repeat fixed 50% 50% / 100% 100% #186185;
}

Скачать градиент: gradientblue_img

пример можно глянуть тут: http://www.yootheme.com/demo/wordpress/subway

CSS background radial-gradient