Как сделать фон с помощью градиента для body (css, html)

Question

чтобы фон был радиальным градиентом и заполнял всю страницу

diego_brando_59 · Accepted Answer

гугл для кого придумали?   body { 
    background:          radial-gradient(to left top, blue, red); 
    background-attachment: fixed; /*edit*/ 
}

mr_james_craft · Answer

Создание радиального градиента, заполняющего всю страницу 
body { 
  background-image: radial-gradient(circle at center, #f0f, #00f); 
  height: 100vh; 
  margin: 0; 
} 
radial-gradient(circle at center, #f0f, #00f);: Создает радиальный градиент в форме круга, центрированный в середине элемента. #f0f - начальный цвет (розовый), #00f - конечный цвет (синий). 
height: 100vh: Задает высоту элемента равной 100% высоты viewport, чтобы градиент заполнил всю страницу. 
margin: 0: Убирает отступы у элемента, чтобы градиент не имел пробелов по краям. 
Другие типы градиентов
Спиральный градиент: 
body { 
  background-image: conic-gradient(from 180deg at 50% 50%, #f0f, #ff0, #0ff, #00f); 
} 
conic-gradient создает градиент, который вращается вокруг центральной точки. 
Градиент, меняющийся как северное сияние: Для создания эффекта северного сияния можно использовать анимацию и несколько градиентов. Это более сложный сценарий и требует более глубокого понимания CSS анимаций. 
Дополнительные параметры 
Направление градиента: Для линейных градиентов можно указать направление: to top, to bottom, to left, to right, или использовать углы. 
Несколько цветовых остановок: 
background-image: linear-gradient(to right, #f0f, #ff0, #0ff, #00f); 
Повторение градиента: 
background-image: repeating-linear-gradient(45deg, #fff, #fff 10px, #ccc 10px, #ccc 20px); 
Радиус градиента: 
background-image: radial-gradient(circle 30px at center, #f0f, #00f); 
Ресурсы для изучения 
MDN Web Docs: Отличное место для глубокого погружения в CSS градиенты
CSS-Tricks: Полезные статьи и примеры
Советы 
Используйте инструменты разработчика: В браузерах есть встроенные инструменты для визуального создания и редактирования градиентов. 
Экспериментируйте: Пробуйте разные комбинации цветов, направлений и типов градиентов, чтобы достичь желаемого эффекта. 
Сохраняйте простоту: Для начала лучше использовать более простые градиенты и постепенно усложнять их. 
Пример с анимацией для эффекта северного сияния: 
CSS 
body { 
  background-image: conic-gradient(from 180deg at 50% 50%, #f0f, #ff0, #0ff, #00f); 
  animation: aurora 10s infinite linear; 
} 
@keyframes aurora { 
  0% { 
    transform: rotate(0deg); 
  } 
  100% { 
    transform: rotate(360deg); 
  } 
} 
Этот код создает вращающийся конический градиент, имитируя эффект северного сияния.

pypsekteply · Answer

Чтобы сделать градиентный фон для тела <body> в HTML, нужно использовать CSS.  Основной способ — применение свойства background с функцией linear-gradient(). 
Пример кода: 
body {
  background: linear-gradient(to right, #ff0000, #0000ff);
}
В этом примере задаётся линейный градиент, который идёт слева направо (параметр to right), начинаясь с красного цвета (#ff0000) и заканчиваясь синим (#0000ff). 
Также можно создать радиальный градиент, который расходится из центра: 
body {
  background: radial-gradient(circle, #ff0000, #0000ff);
}
Важно помнить, что градиенты поддерживаются не во всех старых браузерах, поэтому рекомендуется указывать резервный цвет.