CSS box-shadow генератор

Настройте параметры тени:




{CSS} код для вставки:

Кастомизируйте блок:

Готовые тени:

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

Box shadow CSS свойство

box-shadow — это CSS3 свойство, которое позволяет создавать эффект тени для, практически, любого элемента веб страницы. Оно похоже на эффект Drop Shadows в Photoshop, с помощью этого свойства создается иллюзия глубины на 2-мерных страницах.

Синтаксис

Свойство принимает составное значение из пяти разных частей: горизонтальное смещение, вертикальное смещение, размытие, растяжение, цвет тени. К тому же можно указать будет ли тень внешней или внутренней.


CSS
div {
    box-shadow: offset-x offset-y blur spread color position;
}

В отличие от других свойств, каких как border, которые разбиты на подсвойства (border-width, border-style и тд), box shadow CSS стоит особняком. Соответственно, важен порядок, в котором вы записываете значения свойства.

Горизонтальное смещение (по оси X)

Первое значение offset-x - смещение тени по оси X. Положительное значение сместит тень вправо, а отрицательное — влево.


CSS
.box-1 { box-shadow: -15px 0 10px 0 rgba(0,0,0,0.2); }
.box-2 { box-shadow: 15px 0 10px 0 rgba(0,0,0,0.2); }
.box-1
.box-2

Вертикальное смещение (по оси Y)

Второе значение offset-y - смещение тени по оси Y. Положительное значение сместит тень вниз, а отрицательное — наверх.


CSS
.box-1 { box-shadow: 0 15px 10px 0 rgba(0,0,0,0.2); }
.box-2 { box-shadow: 0 -15px 10px 0 rgba(0,0,0,0.2); }
.box-1
.box-2

Размытие

Третье значение (blur) представляет собой радиус размытия тени, посмотрите как он работает на box shadow генераторе выше. Значение 0 означает, что тень будет совсем не размыта, края и стороны будут абсолютно четкие. Чем выше значение, тем более мутную и размытую тень вы получите. Отрицательные значения не допускаются.


CSS
.box-1 { box-shadow: 0 5px 0 0 rgba(0,0,0,0.2); }
.box-2 { box-shadow: 0 5px 15px 0 rgba(0,0,0,0.2); }
.box-3 { box-shadow: 0 5px 30px 0 rgba(0,0,0,0.2); }
.box-1
.box-2
.box-3

Растяжение

Четвертое значение (spread) представляет собой размер тени или дистанции от тени до элемента. При положительном значении тень увеличится, выйдет за пределы элемента. Отрицательное значение уменьшит и сожмет тень.


CSS
.box-1 { box-shadow: 0 0 5px 0 rgba(0,0,0,0.2); }
.box-2 { box-shadow: 0 0 5px 5px rgba(0,0,0,0.2); }
.box-3 { box-shadow: 0 0 5px -15px rgba(0,0,0,0.2); }
.box-1
.box-2
.box-3

Цвет

Цвет тени может быть абсолютно любым и записан в разных форматах, доступных в CSS (HEX, RGB, RGBA и пр), попробуйте разные оттенки в css box shadow generator.


CSS
.box-1 { box-shadow: 0 10px 5px -5px #e6ecc1; }
.box-2 { box-shadow: 0 10px 5px -5px rgba(30, 129, 204, 0.2); }
.box-1
.box-2

Внешняя/внутренняя

Значение inset определяет положение тени. По умолчанию оно не указано, это означает, что тень будет снаружи элемента. Для того, чтобы тень была внутри элемента, необходимо в конце добавить ключевое слово inset.


CSS
.box-1 { box-shadow: 10px 10px 10px 2px rgba(34, 60, 80, 0.2) inset; }
.box-2 { box-shadow: 10px 10px 10px 2px rgba(34, 60, 80, 0.2); }
.box-1
.box-2

Несколько теней

В CSS тень блока может быть не одна. Чтобы добавить несколько теней, достаточно написать их в одном свойстве через запятую.


CSS
.box-1 {
    box-shadow: 10px 10px 10px 2px rgba(34, 60, 80, 0.2) inset,
                10px 10px 10px 2px rgba(34, 60, 80, 0.2);
}
.box-1

Круглая тень

Тень может быть круглой, для этого достаточно добавить свойство border-radius


CSS
.box-1 {
    box-shadow: 10px 10px 10px 0px rgba(34, 60, 80, 0.2);
    border-radius: 50%;
}
.box-1

Эффект увеличения с тенью

Используя свойства box-shadow и transform, можно создать иллюзию приближения и отдаления элемента от пользователя.


CSS
.box-1 {
    transform: scale(1);
    box-shadow: 0 0 5px 5px rgba(34, 60, 80, 0.2);
    transition: box-shadow 0.5s, transform 0.5s;
}
.box-1:hover {
    ransform: scale(1.2);
    box-shadow: 0 0 15px 7px rgba(34, 60, 80, 0.2);
    transition: box-shadow 0.5s, transform 0.5s;
}
.box-1

Эффект парения элемента с помощью box-shadow

Мы можем добавить тень к псевдоэлементу :after и создать тень ниже элемента. Тем самым создавая иллюзию, что элемент был поднят вверх, а потом упал.


CSS
.box-1 {
    position: relative;
    transform: translateY(0);
    transition: transform 1s;
}
.box-1::after {
    content: "";
    display: block;
    position: absolute;
    bottom: -30px;
    left: 50%;
    height: 8px;
    width: 100%;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.2);
    transform: translate(-50%, 0);
    transition: transform 1s;
}
.box-1:hover {
    transform: translateY(-40px);
    transition: transform 1s;
}
.box-1:hover::after {
    transform: translate(-50%, 40px) scale(0.75);
    transition: transform 1s;
}
.box-1

Тень и свойство clip-path

Тень возможно сделать не только на элементах в виде блока или круга, но и на более сложных формах с использованием свойства clip-path. Правда свойство box-shadow при этом не сработает и нам придется заменить его другим. Приступим, создадим элемент box-1.


CSS
.box-1 {
    clip-path: polygon(30px 0%, 100% 0%, 100% 100%, 30px 100%, 0 50%);
}
.box-1

В CSS существует фильтр, который тоже делает CSS тень блока — drop-shadow(). Но у вас не поучится использовать его непосредственно на элементе, так как clip-path просто отрежет эту тень. Поэтому создаем родительский блок и наложим тень на него.


HTML
<span class="box-1__wrapper">
    <span class="box-1">
        box-1
    </span>
</span>

CSS
.box-1__wrapper {
    filter: drop-shadow(-1px 6px 3px rgba(34, 60, 80, 0.2));
}
.box-1 {
    clip-path: polygon(30px 0%, 100% 0%, 100% 100%, 30px 100%, 0 50%);
}