Создавайте красивые тени CSS Box без особых усилий

Создавайте потрясающие коробчатые тени с помощью нашего интуитивно понятного интерфейса. Скопируйте CSS-код и мгновенно используйте его в своих проектах.

Preview

Тень коробки

Настроить меня

Вывод CSS

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

Управление тенями

Position

0px
4px

Size

6px
-1px

Color

10%

Options

Presets

Мягкая тень

Средняя тень

Тяжелая тень

Внутренняя тень

Острая диагональ

Контурное свечение

Двойная тень

Эффект лифтинга

Как пользоваться

Основные элементы управления

  • Отрегулируйте параметрСмещение по горизонтали, чтобы переместить тень влево или вправо
  • Отрегулируйте параметрСмещение по вертикали, чтобы переместить тень вверх или вниз
  • Увеличьте значениеРадиус размытиячтобы сделать тень мягче
  • Use Радиус разбросадля увеличения или уменьшения общего размера тени
  • Измените параметрColor and OpacityНастройка внешнего вида тени

Расширенные функции

  • Enable Врезная теньдля создания эффекта внутренней тени
  • Use Множественные тенидля более сложных эффектов
  • Сохранить и загрузитьPresetsдля быстрого доступа к вашим любимым теням
  • Click Случайная теньдля вдохновения
  • Скопируйте сгенерированный CSS-код и вставьте его в свой проект

Related Tools

CSS Beautifier

Форматируйте и украшайте свой CSS-код с профессиональной точностью

Простое создание преобразований CSS3

Мощный, интуитивно понятный инструмент для создания сложных преобразований CSS3 без написания кода. Визуализируйте изменения в режиме реального времени и копируйте сгенерированный CSS для использования в своих проектах.

Минификатор CSS

Сжимайте и оптимизируйте свой CSS-код с профессиональной точностью

Конвертер заряда

Преобразуйте измерения электрического заряда между различными единицами измерения с высокой точностью

Обфускатор JavaScript

Защитите свой код JavaScript от несанкционированного доступа и обратного проектирования с помощью нашего мощного инструмента обфускации. Преобразуйте свой код в нечитаемый формат, сохраняя при этом полную функциональность.

Конвертер меньше в CSS

Преобразуйте свой код Less в CSS. Быстро, просто и безопасно.