Генератор тени css3 box-shadow

Online генератор тени box-shadow

Cдвиг X:
Цвет:
Cдвиг Y:
Прозрачность:
Радиус размытия:
Растяжение:
Внутри:
CSS3 Пример
box-shadow:1px 1px 1px 1px rgba(0,0,0,1);
Пример блока

Описание box-shadow

Свойство box-shadow необходимо для того чтобы создавать тени у блоков. Это CSS3 свойство очень сильно облегчило жизнь для верстальщиков, т.к. теперь вам не придется вырезать png тень из картинки. Данное свойство работает тоько в третьей версии CSS, а это значит, что в относительно старых браузерах свойство не будет работать, Но не стоит огорчаться, доля таких бразуеров ничтожно мала. Свойство box-shadow работает во всех современных браузерах.

Синтаксис box-shadow

box-shadow: none | <тень> [,<тень>]*
где <тень>:
<сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет> inset

Пример 1

box-shadow: 1px 1px 2px 3px black;

Пример 2

box-shadow: 1px 1px 2px 3px black, 10px 1px 5px 3px red;

Пример 3

box-shadow: 1px 1px 2px 3px black, 10px 1px 5px 3px red, 0 0 5px 3px pink inset;

Параметры box-shadow

Свойство имеет 6 параметров: 5 обязательных и 1 необязательное.

1. Сдвиг по оси X Смещает тень по оси X
2. Сдвиг по оси Y Смещает тень по оси Y
3. Размытие Радиус размытия края тени. Другими словами, определяет размер переходной области от прозрачного до цвета тени.
4. Растяжение Размер тени не включающая радиуса размытия.
5. Цвет Цвет тени заданный в формате hex или rgb.
6. Внутренняя тень Необязательный параметр, который переносит тень во внутрь блока.