Как сделать градиент background в html?

Пользователь

от jerad.kuphal , в категории: HTML/CSS , 2 года назад

Как сделать градиент background в html?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от sandrine , 2 года назад

@jerad.kuphal  Сделать градиент background в html можно следующим образом:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      .gradient {
        width: 500px;
        height: 500px;
        background: linear-gradient(red, black, blue, pink);
      }
    </style>
  </head>
  <body>
    <div class="gradient">
      <p>Сделать градиент в виде фона</p>
    </div>
  </body>
</html>


Пользователь

от kyleigh_runte , 10 месяцев назад

@jerad.kuphal 

В HTML вы можете создать градиентный фон с помощью CSS. Вот пример использования линейного градиента:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
	Градиентный фон
	
		body {
			background-image: linear-gradient(to bottom right, #008080, #00FFFF);
		}
	


	Заголовок
	Пример градиентного фона.



Здесь мы использовали свойство background-image для задания градиента. Функция linear-gradient() принимает несколько параметров:

  • to bottom right определяет направление градиента.
  • #008080 и #00FFFF задают цвета, которые плавно переходят друг в друга.


Если вы хотите создать радиальный градиент, используйте функцию radial-gradient(). Например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
	Градиентный фон
	
		body {
			background-image: radial-gradient(circle, #FF0000, #000000);
		}
	


	Заголовок
	Пример радиального градиентного фона.



Здесь мы использовали функцию radial-gradient(), чтобы создать градиент из круга. Первый параметр (в данном случае circle) задает форму градиента. Затем мы указали цвета, которые плавно переходят друг в друга.


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