градиенты CSS

Приятные градиенты для вашего сайта с CSS

· CSS и Снипеты · 2 мин чтения

В этом небольшой спиппете, я вам представлю шесть приятных на глаз градиентов, которые могут пригодиться при создании сайта.

Ниже представлен список градентов. Сначала будет показан пример градента, а ниже CSS код, который генерирует его.

Первый

.bg-gradient-1 {
    background: radial-gradient(circle at 8.75% 8.45%,#003973,transparent 100%),radial-gradient(circle at 94.06% 82.83%,#E5E5BE,transparent 100%),radial-gradient(circle at 50% 50%,#668cc2,#668cc2 100%);
}

Второй

.bg-gradient-2 {
    background: radial-gradient(circle at 1.98% 3%,#348F50,transparent 100%),radial-gradient(circle at 98.02% 98%,#56B4D3,transparent 100%),radial-gradient(circle at 50% 50%,#668cc2,#668cc2 100%);
}

Третий

.bg-gradient-3 {
    background: radial-gradient(circle at 1.98% 74.02%,#E55D87,transparent 100%),radial-gradient(circle at 98.02% 35.97%,#5FC3E4,transparent 100%),radial-gradient(circle at 50% 50%,#0cc285,#0cc285 100%);
}

Четвертый

.bg-gradient-5 {
    background: radial-gradient(circle at 1.98% 89.01%,#7474BF,transparent 100%),radial-gradient(circle at 98.02% 21.98%,#348AC7,transparent 100%),radial-gradient(circle at 50% 50%,#0cc285,#0cc285 100%);
}

Пятый

.bg-gradient-7 {
    background: radial-gradient(circle at 1.98% 85.01%,#134E5E,transparent 100%),radial-gradient(circle at 98.02% 18.98%,#71B280,transparent 100%),radial-gradient(circle at 50% 50%,#0cc285,#0cc285 100%);
}

Последний

.bg-gradient-8 {
    background: radial-gradient(circle at 1.98% 20.98%,#4b6cb7,transparent 100%),radial-gradient(circle at 98.02% 20.98%,#182848,transparent 100%),radial-gradient(circle at 50% 50%,#0cc285,#0cc285 100%);
}

Демо все примеров показаных выше.

Дополнительно

Так в интернете есть огромное колличество CSS геренаторов. Некоторые из них я представлю ниже.

Если у вас есть какие-то вопросы, то пожалуйста задавайте их в комментарии ниже.