Мне часто задают вопрос: можно ли создавать тени из градиентов вместо сплошных цветов? Не существует конкретного свойства CSS, которое делает это (поверьте мне, я смотрел), и любой пост в блоге, который вы найдете об этом, в основном представляет собой множество трюков CSS для аппроксимации градиента. На самом деле мы рассмотрим некоторые из них по ходу дела. Вместе мы раздвинем границы, чтобы получить решение, которое охватывает то, чего я не видел больше нигде: прозрачность. Большинство трюков...

Обычно для таких эффектов используют изображения, SVG, canvas или JavaScript. Мне стало интересно, насколько далеко можно зайти, если ограничиться только HTML и CSS - без единой картинки и без скриптов. В результате получилась небольшая сцена: светящаяся Луна, мягкое ночное небо, кратеры, звёзды и лёгкая анимация движения. Всё это - средствами CSS. Полный исходный код проекта с комментариями я выложил отдельно - ссылку оставил в конце статьи. Ниже - видео, где я шаг за шагом собираю эту анимацию, используя только HTML и CSS...