Обычно для таких эффектов используют изображения, SVG, canvas или JavaScript.
Мне стало интересно, насколько далеко можно зайти, если ограничиться только HTML и CSS - без единой картинки и без скриптов.
В результате получилась небольшая сцена: светящаяся Луна, мягкое ночное небо, кратеры, звёзды и лёгкая анимация движения. Всё это - средствами CSS.
Полный исходный код проекта с комментариями я выложил отдельно - ссылку оставил в конце статьи.
Ниже - видео, где я шаг за шагом собираю эту анимацию, используя только HTML и CSS.
Идея эксперимента
Цель была простой:
не повторить чей-то эффект, а собрать визуально правдоподобную сцену, используя только базовые возможности CSS.
Без:
- изображений
- SVG
- JavaScript
- библиотек и фреймворков
Только:
- HTML
- CSS
- градиенты
- тени
- анимации
Как устроена Луна
Объём Луны создаётся за счёт радиальных градиентов.
Светлая область смещена, чтобы появился эффект освещения, а края постепенно затемняются - так появляется ощущение сферы.
Кратеры - это несколько слоёв с разной прозрачностью и небольшим смещением.
Визуально они выглядят сложными, но на самом деле это всё те же градиенты, аккуратно сложенные друг на друга.
Свечение и атмосфера
Чтобы Луна не выглядела «плоским кругом», добавлено мягкое внешнее свечение.
Оно реализовано фоновыми градиентами и дополнительными слоями с размытием.
Лёгкая пульсация и медленное движение создаются CSS-анимацией - без резких переходов, чтобы эффект оставался спокойным и атмосферным.
Звёзды без картинок
Звёздное небо собрано одной строкой CSS с использованием свойства box-shadow.
Это простой, но очень мощный приём: одна маленькая точка размножается десятками теней с разными координатами.
Такой подход:
- не нагружает страницу
- легко масштабируется
- отлично подходит для декоративных фонов
Почему это полезно на практике
Этот проект - не просто визуальный эксперимент.
Те же приёмы можно использовать для:
- CSS-арта и creative coding
- декоративных элементов сайтов
- фонов для лендингов
- эффектов в портфолио
- изучения продвинутых возможностей CSS
Это хороший пример того, как далеко можно зайти без JavaScript, если понимать, как работают градиенты, тени и анимации.
Где посмотреть полный код
Я выложил полный исходный код проекта с комментариями и структурой на сайте.
Там можно подробно разобрать, как именно собрана сцена, и использовать этот эффект в своих проектах или адаптировать под свои задачи.
👉 https://vsmdit.com/css-moon-animation/
Если интересно разбирать CSS-эффекты на реальных примерах - этот проект как раз про это.