1

Нужно сделать вот такой градиент

Помогите, пожалуйста, сделать вот такой градиент на CSS.

5
  • 1
    это не биржа труда
    – meine
    12 окт 2019 в 16:19
  • полностью согласен с @meine - еще хочу дополнить это не градиаент, это паттерн. для того чтобы его сделать нужно вырезать квадрат и клонировать его с помощью css - например background-repeat: repeat-x; 12 окт 2019 в 18:39
  • Но это же не градиент... 12 окт 2019 в 18:43
  • @Suvitruf да, это несколько радиальных градиентов наложенных друг на друга 12 окт 2019 в 19:05
  • @StrangerintheQ век живи - век учись) 12 окт 2019 в 19:07

1 ответ 1

6

Это повторение вот такого шаблона:

введите сюда описание изображения

Такой можно собрать при помощи css переменных и radial-gradient:

body {
  --c1: lightgray;
  --c2: white;
  
  --pattern: 
          var(--c2) 0px,  var(--c2) 4px,
          var(--c1) 5px,  var(--c1) 14px,
          var(--c2) 15px, var(--c2) 19px,
          var(--c1) 20px, var(--c1) 29px,
          var(--c2) 30px, var(--c2) 34px,
          var(--c1) 35px, var(--c1) 44px,
          var(--c2) 45px, var(--c2) 49px,
          transparent 50px, transparent 100%;
          
  background: 
        radial-gradient(circle at 50px  75px, var(--pattern)), 
        radial-gradient(circle at 0px   50px, var(--pattern)),
        radial-gradient(circle at 100px 50px, var(--pattern)),
        radial-gradient(circle at 50px  25px, var(--pattern));
        
  background-size: 100px 50px
}

1
  • Отлично! Код красиво смотрится. Нужно будет мне тоже чаще CSS-переменные применять по прямому назначению, а не только для доступа из JS. :)
    – UModeL
    18 мар 2020 в 8:18

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.