Блог

Главная - Вопросы по программированию - Можно ли создать этот фон, используя только CSS?

Можно ли создать этот фон, используя только CSS?

#html #css #sass #css-selectors

Вопрос:

Я хотел создать div с этим сложным градиентом в качестве фона.

Я просто хочу знать, можно ли этого достичь, используя только CSS? Было бы очень полезно, если бы вы могли привести какой-нибудь пример того, как это сделать.

Спасибо!

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

Комментарии:

1. Для этого может потребоваться сочетание линейного и радиального градиентов вместе, хотя, вероятно, этого будет трудно достичь. Почему бы не использовать фон изображения? Смотрите Следующее, если вы хотите сделать это с помощью CSS: developer.mozilla.org/en-US/docs/Web/CSS/gradient/… и developer.mozilla.org/en-US/docs/Web/CSS/gradient/…

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

Ответ №1:

Вы можете достичь эффекта с помощью linear-gradient :

 html, body{
  height:100%;
  background-image: linear-gradient(to right top, #f3075c, #ed0077, #e11991, #cf30a8, #b643bd, #9860d9, #6f77ee, #288afa, #00a8ff, #00c2ff, #00d8f7, #51eceb);
}

Ответ №2:

Самое близкое, что я могу найти, — это простой угловой градиент, вы можете настроить цвета, чтобы они больше походили на настоящие

 .gradient {
  height: 200px;
  background-image: linear-gradient(to top right, red, blue);
} 
 <div class="gradient"></div>
Метки: ,