Домой / Рецепты CSS / Градиентный фон для сайта на чистом CSS
Градиентный фон для сайта на чистом CSS

Градиентный фон для сайта на чистом CSS

Красивый и оригинальный пример реализации градиентного светло-голубого фона для сайта на чистом CSS.

Демо

CSS


HTML, BODY {
height: 100%;
}

BODY {
background-image: -webkit-radial-gradient(circle at left, rgba(255, 255, 255, 0), #70dbdb 0%, #70dbdb 5%, rgba(255, 255, 255, 0) 5%, rgba(255, 255, 255, 0) 10%, #26d9bb 10%, #26d9bb 15%, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 0) 20%, #22c38e 20%, #22c38e 25%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 30%, #26d9bb 30%, #26d9bb 35%, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0) 40%, #70dbdb 40%, #70dbdb 45%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0) 50%), -webkit-radial-gradient(right, circle, rgba(255, 255, 255, 0), #70dbdb 0%, #70dbdb 5%, rgba(255, 255, 255, 0) 5%, rgba(255, 255, 255, 0) 10%, #26d9bb 10%, #26d9bb 15%, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 0) 20%, #22c38e 20%, #22c38e 25%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 30%, #26d9bb 30%, #26d9bb 35%, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0) 40%, #70dbdb 40%, #70dbdb 45%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0) 50%), -webkit-radial-gradient(circle at left, rgba(255, 255, 255, 0), #70dbdb 0%, #70dbdb 5%, rgba(255, 255, 255, 0) 5%, rgba(255, 255, 255, 0) 10%, #26d9bb 10%, #26d9bb 15%, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 0) 20%, #22c38e 20%, #22c38e 25%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 30%, #26d9bb 30%, #26d9bb 35%, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0) 40%, #70dbdb 40%, #70dbdb 45%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0) 50%), -webkit-radial-gradient(right, circle, rgba(255, 255, 255, 0), #70dbdb 0%, #70dbdb 5%, rgba(255, 255, 255, 0) 5%, rgba(255, 255, 255, 0) 10%, #26d9bb 10%, #26d9bb 15%, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 0) 20%, #22c38e 20%, #22c38e 25%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 30%, #26d9bb 30%, #26d9bb 35%, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0) 40%, #70dbdb 40%, #70dbdb 45%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0) 50%);
background-image: radial-gradient(circle at left, rgba(255, 255, 255, 0), #70dbdb 0%, #70dbdb 5%, rgba(255, 255, 255, 0) 5%, rgba(255, 255, 255, 0) 10%, #26d9bb 10%, #26d9bb 15%, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 0) 20%, #22c38e 20%, #22c38e 25%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 30%, #26d9bb 30%, #26d9bb 35%, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0) 40%, #70dbdb 40%, #70dbdb 45%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0) 50%), radial-gradient(circle at right, rgba(255, 255, 255, 0), #70dbdb 0%, #70dbdb 5%, rgba(255, 255, 255, 0) 5%, rgba(255, 255, 255, 0) 10%, #26d9bb 10%, #26d9bb 15%, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 0) 20%, #22c38e 20%, #22c38e 25%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 30%, #26d9bb 30%, #26d9bb 35%, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0) 40%, #70dbdb 40%, #70dbdb 45%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0) 50%), radial-gradient(circle at left, rgba(255, 255, 255, 0), #70dbdb 0%, #70dbdb 5%, rgba(255, 255, 255, 0) 5%, rgba(255, 255, 255, 0) 10%, #26d9bb 10%, #26d9bb 15%, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 0) 20%, #22c38e 20%, #22c38e 25%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 30%, #26d9bb 30%, #26d9bb 35%, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0) 40%, #70dbdb 40%, #70dbdb 45%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0) 50%), radial-gradient(circle at right, rgba(255, 255, 255, 0), #70dbdb 0%, #70dbdb 5%, rgba(255, 255, 255, 0) 5%, rgba(255, 255, 255, 0) 10%, #26d9bb 10%, #26d9bb 15%, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 0) 20%, #22c38e 20%, #22c38e 25%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 30%, #26d9bb 30%, #26d9bb 35%, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0) 40%, #70dbdb 40%, #70dbdb 45%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0) 50%);
background-color: #22c3c3;
-webkit-background-size: 2em 2em;
background-size: 2em 2em;
background-position: 0 0, 0 1em, 1em 0, 1em 1em;
background-blend-mode: luminosity, luminosity, luminosity, luminosity;
}


Красивый и оригинальный пример реализации градиентного светло-голубого фона для сайта на чистом CSS. CSS HTML, BODY { height: 100%; } BODY { background-image: -webkit-radial-gradient(circle at left, rgba(255, 255, 255, 0), #70dbdb 0%, #70dbdb 5%, rgba(255, 255, 255, 0) 5%, rgba(255, 255, 255, 0) 10%, #26d9bb 10%, #26d9bb 15%, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 0) 20%, #22c38e 20%, #22c38e 25%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 30%, #26d9bb 30%, #26d9bb 35%, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0) 40%, #70dbdb 40%, #70dbdb 45%, rgba(255, 255, 255, 0)…

Обзор

Проголосуйте за урок

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 4.9 ( 1 голосов )
100

Оставить комментарий

Ваш email не будет опубликован.

*