Для створення градієнтів призначено функцію linear-gradient(), яка додається до властивості background або background-image.
background: linear-gradient(#9A5044, #E8D9A9);
Без зазначення додаткових параметрів градієнт виходить вертикальним, перше значення вказує колір зверху, друге знизу. Браузер вже сам робить плавний перехід між зазначеними кольорами.
Щоб зробити градієнт у вигляді фону веб-сторінки, background з linear-gradient() слід додати до селектора body. Однак такий фон прив'язаний до висоти вмісту <body> і якщо він менший за висоту веб-сторінки, то результат виходить так собі (рис. 1).
Мал. 1. Вигляд градієнта
Такого можна уникнути, якщо до background додати параметр fixed, тоді висота градієнта буде збігатися з висотою веб-сторінки, а при прокручуванні вмісту градієнт залишається нерухомим (приклад 1).
Приклад 1. Градієнтний фон
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Градієнт</title> <style> body { /* Градієнт */
background: linear-gradient(#9A5044, #E8D9A9) fixed; }
div { width: 70%; /* Ширина */
margin: auto; /* Вирівнюємо по центру */
min-height: 2000px; /* Мінімальна висота */
background: #fff; /* Білий колір фону */
}
</style>
</head>
<body> <div></div>
</body>
</html>Результат цього прикладу показаний на рис. 2. Для наочності доданий високий білий блок, що показує, що при прокручуванні веб-сторінки градієнт не змінюється. alt="Вигляд веб-сторінки з градієнтним фоном">
Мал. 2. Вигляд веб-сторінки з градієнтним фоном