Генератор CSS-тіней
Створити тінь CSS (box-shadow)
Працює в браузері · Без завантаження
Сам інструмент та інструкції на цій сторінці поки англійською. Працює він так само: усе відбувається у вашому браузері.
Box and background
Ваш браузер застарий для цього інструмента. Оновіть його або скористайтеся свіжою версією Chrome, Edge, Firefox чи Safari.
- Ніщо не залишає ваш пристрій
- Сервер не обмежує розмір файлів
- Без реєстрації, без водяного знака
- Безкоштовно
How to make a box shadow
- Start from a ready-made shadow, or adjust the sliders.
- Add layers: a tight shadow plus a wide, soft one looks most natural.
- Copy the CSS.
Tips
- Low opacity (8 to 20%) and a negative spread give soft, modern shadows.
- Inset shadows look pressed in, for inputs and toggles.
- Change the box and background colors to see the shadow on your own design.
Поширені запитання
Does box-shadow slow down a page?
Rarely. Very large blurs on many moving elements can, so keep animated shadows simple.
Is anything uploaded?
No. The preview is drawn by your browser.