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

5

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

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

Такой можно собрать при помощи 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 that you have read and understand our privacy policy and code of conduct.

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