CSS gradient генератор

Настройте параметры градиента CSS:

box-shadow gradient

{CSS} код для вставки:

  • background: linear-gradient(45deg, #a1ffce, #f9ffd1);
  • background: linear-gradient(45deg, #a8edea, #fed6e3);
  • background: linear-gradient(45deg, #30cfd0, #330867);
  • background: linear-gradient(45deg, #f5f7fa, #c3cfe2);
  • background: linear-gradient(45deg, #d299c2, #fef9d7);
  • background: linear-gradient(45deg, #fddb92, #d1fdff);
  • background: linear-gradient(45deg, #37ecba, #72afd3);
  • background: linear-gradient(45deg, #9890e3, #b1f4cf);
  • background: linear-gradient(45deg, #fff1eb, #ace0f9);
  • background: linear-gradient(45deg, #e6e9f0, #eef1f5);
  • background: linear-gradient(45deg, #00c6fb, #005bea);
  • background: linear-gradient(45deg, #6a85b6, #bac8e0);
  • background: linear-gradient(45deg, #a7a6cb, #8989ba);
  • background: linear-gradient(45deg, #8baaaa, #ae8b9c);
  • background: linear-gradient(45deg, #13547a, #80d0c7);

Градиент CSS

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

Для того, чтобы задать градиент используется свойство background-image или сокращенный вариант background-image. И мы можем создать как линейный так и радиальный градиент, прописав значения либо linear-gradient, либо radial-gradient и указав начальный и конечный цвета. Вот пример синтаксиса:

background: linear-gradient(#58b6b9, #edf1cf);

Поменять направление возможно, указав его вначале, перед первым цветом.

background: linear-gradient(to right, #94525c, #14aad7);

Если заменить этот параметр на to top right вы получите диагональный градиент. Такой же эффект можно создать, указав параметр в градусах, например, 45deg.

Вы можете использовать больше чем 2 цвета, и цвета можно записать в том числе и по названию.

background: linear-gradient(to right, #94525c, #14aad7, cyan);

Каждый из четырех цветов будет занимать равное количество доступного пространства, что даст нам гладкий и сбалансированный градиент.

Если мы хотим, чтобы один цвет занимал больше места, чем другой, можно добавить значение в процентах непосредственно после цвета. Потренируйтесь на градиент css генераторе выше.

background: linear-gradient(to right, #a3795f 50%, #012754);

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

Используем все, что мы уже узнали ранее, чтобы создать радиальный градиент. На самом деле это довольно просто, достаточно в начале указать значение radial-gradient.

background: radial-gradient(#edf1cf, #43acb4);

Такой радиальный градиент принимает форму родительского блока, поэтому вместо круга мы получили эллипс. Чтобы градиент был в форме круга независимо от пропорций родителя, необходимо указать ключевое слово circle.

background: radial-gradient(circle, #5d1a78, #414b50);

К тому же мы можем указать где будет центр радиального градиента. Давайте сделаем так, чтобы он был в левом верхнем углу:

background: radial-gradient(circle at top left, #e1d767, #d3f6da);

Практическое использование CSS градиента

Давайте попробуем использовать градиент более оригинальным способом.

Градиент поверх картинки

Ниже вы видите пример слоя с градиентом поверх изображения. Здесь мы использовали полупрозрачные rgba цвета.

Свойство background может принимать сразу несколько значений. При этом первое будет верхним слоем, а последнее — нижним. 


CSS
div {
    background: linear-gradient(to right, rgba(75, 123, 211, 0.5), rgba(22, 215, 177, 0.3)), url('gradient.jpg');
}

Мы получаем такой эффект:

Градиент в тексте

Градиент в тексте - это классный эффект, хотя и не полностью поддерживаемый в чистом виде. Вместо него мы используем свойство background-clip, это что-то вроде хака, но отлично работающего хака.

Возьмем элемент, в данном случае h1, и применим к нему градиент. Свойству background-clip присвоим значение text, это удалит фон из всего блока, за исключением текста. И, конечно же, следует сделать свойство color прозрачным, иначе мы не увидим градиент. 


CSS
div {
    background-image: linear-gradient(to right, #0cebeb, #20e3b2, #29ffc6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

gradient generator