Цвет и дизайн
Генератор Box Shadow
Бесплатный генератор CSS box-shadow. Создавайте тени с помощью ползунков для смещения, размытия, распространения, цвета и непрозрачности. Накладывайте несколько теней. Мгновенно копируйте CSS.
Runs in your browser
Box shadow generator
CSS
box-shadow: 0px 10px 30px -10px rgba(59, 130, 246, 0.40);css
Примечание редактора
Understanding · Five numbers. A whole light source.
Эта углублённая глава пока доступна только на английском языке. Инструмент конвертации выше работает на вашем языке; развёрнутая статья ещё не переведена.
Часто задаваемые вопросы
Quick answers.
›Can I layer multiple shadows?
Yes — add as many shadows as you want, each with its own offset, blur, spread and color.
›Does it support inset shadows?
Yes — toggle 'inset' to make a shadow appear inside the element instead of outside.
›Does it output Tailwind?
Yes — for common single-shadow patterns. Multi-shadow stacks need custom CSS.
›Is the generator free?
Yes — fully free, no signup.
Люди также ищут
Связанные инструменты
More in this room.
- Расширенный редактор теней Box ShadowНаложение нескольких теней с предварительным просмотром в реальном времени.
- Генератор градиентовЛинейные, радиальные и конические градиенты CSS.
- Генератор Border RadiusРедактор индивидуального border-radius CSS.
- Редактор Cubic BezierВизуально создавайте кривые сглаживания CSS.
- Генератор CSS-анимацийСоздавайте ключевые кадры визуально, копируйте готовый CSS.
- Генератор CSS-фильтровПредварительный просмотр размытия, яркости, поворота оттенка и многого другого.