Как сделать внутреннюю тень css

Внутренняя тень (inner shadow) может быть позже создана в CSS с использованием свойств box-shadow и inset. Вот пример кода для создания внутренней тени на блоке div с классом «shadow»:

HTML:

<div class="shadow">
  <p>Это блок с внутренней тенью</p>
</div>

CSS:

.shadow {
  width: 300px;
  height: 150px;
  background-color: #fff;
  box-shadow: inset 0 0 10px #ddd;
}

Здесь мы использовали свойство box-shadow с значением inset, чтобы создать внутреннюю тень. Параметры по порядку:

  1. offset-x: 0 – тень смещается не вправо и не влево
  2. offset-y: 0 – тень смещается не вверх и не вниз
  3. blur-radius: 10px – радиус размытия
  4. color: #ddd – цвет тени (здесь используется серый)

Вы можете изменять значение box-shadow в соответствии со своими потребностями, чтобы создать тень нужного цвета, радиуса и глубины.

реклама

Качественный хостинг сайтов

реклама

Получите консультацию нашего маркетолога

Изучит ваш проект, подберет подходящие услуги и тарифы

Получите бесплатный аудит

Наш специалист сделает базовый аудит вашего проекта и предложит персональные предложения.

Закажите услугу Как сделать внутреннюю тень css

Наш специалист свяжется с вами в ближайшее время и уточнит детали