What are the different box-shadow parameters?

Box-shadow uses: horizontal offset, vertical offset, blur radius, spread radius, color, and inset (optional). Each controls different shadow aspects like position, softness, and size.

What's the difference between outset and inset shadows?

Outset shadows appear outside the element (default), creating depth and elevation. Inset shadows appear inside the element, creating a recessed or pressed effect.

Can I apply multiple shadows to one element?

Yes! Separate multiple shadows with commas. The first shadow appears on top, with subsequent shadows layered underneath. This allows complex shadow effects.

How do I create realistic drop shadows?

Use subtle offsets (2-8px), moderate blur (4-20px), minimal spread (0-2px), and low opacity colors (rgba with 0.1-0.3 alpha). Avoid harsh black shadows.

Do box-shadows affect layout and performance?

Box-shadows don't affect layout flow but can impact performance with many elements or complex shadows. Consider using transform: translateZ(0) for hardware acceleration on animated shadows.

PixelTool

CSS Box Shadow Generator

Generate CSS box-shadow with visual preview and multiple shadows

Слои теней

Тень 1

0/4/6/-1

Настройки тени

Смещение X

Смещение Y

Размытие

Растяжение

-1

Цвет

Прозрачность

10%

Внутренняя тень (inset)

Настройки элемента

Цвет элемента

Цвет фона

Скругление углов

8px

Размер элемента

200px

Предпросмотр

CSS код

box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);

Готовые пресеты

Базовые

Material Design

Неоморфизм

Внутренние

Свечение

Советы по CSS тени

Основы теней

• offsetX/Y - смещение тени
• blur - размытие краев
• spread - увеличение/уменьшение размера
• inset - внутренняя тень

Принципы дизайна

• Используйте мягкие тени для современного вида
• Комбинируйте несколько теней для глубины
• Светлые тени сверху создают выпуклость
• Темные тени снизу создают подъем

Производительность

• Избегайте большого blur на мобильных
• Множественные тени могут влиять на FPS
• Используйте will-change для анимаций
• Тестируйте на разных устройствах

Share This Tool

Found this tool helpful? Share it with your friends and colleagues!

Pro tip: You can also use the keyboard shortcut Ctrl+Shift+S to quickly share

Related Tools

Other useful tools from the same category

CSS Gradient Generator

Create linear, radial, and conic CSS gradients with visual editor

css

gradient

PX to REM/EM Converter

Convert between px, rem, and em CSS units with custom base font size

rem

Color Converter

Convert colors between HEX, RGB, HSL, CMYK, LAB, and other color models

color

converter