Как сделать сайт прозрачным: фон и карточки в 2026

Сделать сайт прозрачным обычно значит сделать полупрозрачными фон страницы, шапку или карточки, сохранив текст и кнопки плотными. Для этого задают альфа-канал только цвету фона, а не снижают прозрачность всего блока. Обычная веб-страница не может показать сквозь себя рабочий стол компьютера: прозрачность видна относительно родительского слоя или фоновой картинки внутри сайта.

Какой слой нужно сделать прозрачным

Сначала выберите один объект: фон всей страницы, отдельную панель, изображение или весь элемент вместе с содержимым. Если нужен только просвечивающий фон карточки, используйте цвет с альфа-каналом. Свойство opacity действует на элемент целиком, включая его текст, и поэтому часто даёт блеклый результат. Это поведение описано в справке MDN по opacity.

Правило выбора: меняйте альфа-канал цвета, если текст должен остаться плотным. Используйте opacity только тогда, когда весь элемент вместе с содержимым должен стать полупрозрачным.

Карта результата: на входе есть страница с фоном и контентом. На выходе фон просвечивает, текст читается, кнопки нажимаются, а эффект понятен на телефоне и компьютере. Обязательные этапы: выбрать слой, добавить подложку, задать прозрачный цвет, проверить контраст и предусмотреть вид без размытия.

Минимальный вариант для прозрачной карточки

Добавьте изображение или градиент к странице, а карточке задайте белый цвет с прозрачностью. MDN показывает, что background-color принимает RGB-цвет с альфа-каналом, например rgb(255 255 255 / 70%). Цвет рисуется под фоновыми изображениями, поэтому результат зависит от слоя за карточкой. Синтаксис background-color поддерживает и ключевое слово transparent.

body {
  min-height: 100vh;
  background: linear-gradient(135deg, #d85a30, #2b2320);
}
.glass-card {
  max-width: 720px;
  margin: 48px auto;
  padding: 32px;
  color: #241d1a;
  background: rgb(255 255 255 / 82%);
  border-radius: 24px;
}

1. Назначьте карточке фоновый цвет с альфа-каналом. Начните с 80-90%, чтобы текст не потерял опору.
2. Оставьте opacity: 1 у самой карточки. Так заголовок, ссылки и кнопки не станут бледными.
3. Проверьте карточку над самым светлым и самым тёмным участком фонового изображения.
4. Снижайте плотность фона только после проверки текста и элементов управления.
5. Сохраните вариант с плотным фоном как безопасный откат.

Если страницу собирает ИИ, дайте ему критерии: какой блок меняется, какой цвет остаётся у текста, какая подложка видна и что происходит без поддержки эффекта. Общий процесс работы с исходным HTML описан в статье как сделать сайт на HTML.

По теме: Как сделать cookies на сайте: безопасная схема в 2026

Как добавить эффект матового стекла

Для размытия содержимого за карточкой используют backdrop-filter: blur(...). Свойство обрабатывает пиксели, нарисованные позади элемента, поэтому у карточки должен быть частично прозрачный фон. MDN описывает backdrop-filter и границы его работы. Без фонового рисунка или цветового перехода размытие почти незаметно.

.glass-card {
  background: rgb(255 255 255 / 76%);
  backdrop-filter: blur(16px);
}
@supports not (backdrop-filter: blur(1px)) {
  .glass-card { background: rgb(255 255 255 / 94%); }
}

Граничный случай возникает, когда прозрачный контейнер вложен в другой. Родитель с opacity создаёт новый контекст наложения и ограничивает результат дочерних эффектов. Уберите opacity у родителя, перенесите прозрачность в его background и оставьте размытие на одной панели.

Как проверить читаемость, а не только внешний вид

Полупрозрачный фон меняется вместе с изображением под ним, поэтому одного удачного снимка экрана недостаточно. Для обычного текста WCAG указывает минимальное отношение контраста 4.5:1, для крупного текста 3:1. Контраст оценивают относительно реального фона. Разъяснение W3C по минимальному контрасту предупреждает, что неизвестный фон мешает надёжной проверке.

• Найдите место, где под текстом оказывается самый светлый участок картинки.
• Проверьте светлую и тёмную тему, если сайт умеет переключаться между ними.
• Откройте страницу на ширине 320-375 пикселей и убедитесь, что карточка не выходит за экран.
• Перейдите по ссылкам с клавиатуры и убедитесь, что фокус заметен.
• Отключите backdrop-filter в инструментах разработчика. Карточка должна остаться читаемой.

Критерий приёмки: содержимое читается при любом кадре фона, элементы сохраняют видимый фокус, а отключение размытия не ломает композицию. Если приходится выбирать один идеальный участок картинки, фон слишком прозрачный или под текстом нужна отдельная плотная подложка.

По теме: Как сделать трассировку до сайта: Windows, macOS и Linux

Диагностика по симптому

• Текст стал бледным вместе с панелью: уберите opacity с контейнера и перенесите прозрачность в background-color.
• Прозрачность не видна: добавьте контрастную подложку и проверьте, что альфа-канал меньше 100%.
• Размытие не работает: оставьте плотный запасной фон и проверьте поддержку через @supports.
• На фото текст исчезает: увеличьте непрозрачность панели или добавьте однотонный слой.
• Кнопка видна, но не нажимается: проверьте перекрывающие псевдоэлементы и pointer-events.

Если задача шире одного эффекта, сначала соберите фон и крупные секции, затем карточки и только после этого анимацию. Варианты подложки собраны в инструкции как сделать фон сайта, а адаптивную проверку можно продолжить по гайду как сделать мобильный сайт.

Когда прозрачный дизайн не подходит

Откажитесь от эффекта на длинных текстах, таблицах, формах оплаты и местах, где ошибка чтения важнее декоративности. Не ставьте полупрозрачную панель поверх постоянно меняющегося видео без плотной подложки. Для слабых устройств разумнее оставить статичный цвет без размытия.

Частые вопросы

Можно ли сделать прозрачным весь сайт?

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

Почему вместе с фоном исчезает текст?

Скорее всего, opacity задан контейнеру. Перенесите прозрачность в цвет его фона.

Нужно ли размытие для эффекта стекла?

Нет. Полупрозрачный цвет работает сам по себе. Размытие добавляет характер, но требует запасного оформления.

Как понять, что фон слишком прозрачный?

Проверьте текст над самым светлым и самым тёмным участком подложки. Если чтение зависит от кадра, увеличьте плотность панели.