Как создать градиент «ночное небо» с звёздами — и чтобы он выглядел глубоко, а не как заставка 2005 года
Ты хочешь, чтобы фон твоего сайта, приложения или презентации выглядел как настоящая ночь — не просто тёмно-синий с белыми точками, а так, чтобы человек останавливался, присматривался, чувствовал глубину. Не как «дизайн из Windows XP», а как будто смотришь вверх в чистом поле, без светового загрязнения. Это не про красоту. Это про атмосферу. И да — это реально сделать, даже если ты не художник.
Я делал такие фоны для приложений с медитациями, для сайтов астрономических клубов, для лендингов космических стартапов. И каждый раз клиент говорил: «Это… как будто я вижу звёзды». Не потому что я использовал дорогие плагины, а потому что знал, как делать градиент и где ставить звёзды. Сейчас расскажу, как это работает.
Почему простой градиент «тёмно-синий → чёрный» не работает
Первое, что делают все: берут чёрный, добавляют синий, рисуют градиент сверху вниз, ставят 50 белых точек — и радуются. Но результат выглядит плоско. Почему?
Потому что в реальной ночи:
- небо не чёрное — оно тёмно-синее, почти фиолетовое у горизонта;
- свет рассеивается — чем выше, тем светлее, но не резко, а плавно;
- звёзды не одинаковые — одни ярче, другие едва видны, некоторые мерцают;
- есть туманности, тени, слабые полосы Млечного Пути — они не точки, а размытые пятна.
Если ты хочешь глубину — тебе нужно не «заполнить» фон, а создать ощущение объёма. А это значит: три слоя.
Три слоя настоящего ночного неба
Все реальные эффекты «ночного неба» строятся на трёх уровнях:
- Фоновый градиент — основа. Не просто синий → чёрный, а с переходом в тёплые оттенки у горизонта.
- Рассеянный свет (Млечный Путь) — не звёзды, а слабая светящаяся полоса, как дымка. Её не видно на всех экранах, но если она есть — небо «живёт».
- Звёзды — не однородные точки. Разные размеры, яркости, случайные скопления. И ни одной звезды не должно быть в центре экрана — там глаза человека фокусируются, и если там «белая точка», он сразу чувствует фальшь.
Сейчас разберём каждый слой по шагам.
Шаг 1: Создаём фоновый градиент
Берём цвета не из палитры «темно-синий» и «чёрный». Используем реальные оттенки, которые есть на фотографиях ночного неба:
- Верх:
#0a1a2f— тёмный индиго, почти чёрный, но с оттенком синего. - Середина:
#1a2d4a— глубокий сине-серый. - Горизонт:
#21385c— чуть светлее, с лёгким фиолетовым отливом.
Градиент должен быть не вертикальным, а диагональным — от верхнего левого угла к нижнему правому. Почему? Потому что в реальности свет от земли (городов, ламп) поднимается вверх и слегка подсвечивает небо снизу. Горизонтальный градиент — это скучно. Диагональный — создаёт ощущение пространства.
В CSS это выглядит так: