Мощные CSS-генераторы для box shadows, flexbox-макетов, grid-макетов и конвертации единиц. Получайте CSS и Tailwind код мгновенно. Вся обработка происходит локально в браузере.
box-shadow: 4px 4px 8px 0px #00000040;Заметки к инструментам — функция для спонсоров.
Выберите одну из вкладок: Box Shadow, Flexbox или Конвертер единиц.
Используйте ползунки и поля ввода для настройки CSS-свойств. Смотрите живой предварительный просмотр результата.
Скопируйте сгенерированный CSS или Tailwind код в буфер обмена.
Попробуйте готовые конфигурации для распространённых паттернов, а затем настройте их по своему усмотрению.
Генератор box shadow создаёт CSS-свойства box-shadow с настраиваемым горизонтальным/вертикальным смещением, радиусом размытия, растяжением и цветом. Несколько слоёв можно накладывать для создания сложных эффектов — приподнятых карточек или neumorphic-дизайнов. Каждый слой поддерживает RGBA-цвета с прозрачностью alpha и внутренние тени (inset). Инструмент генерирует как стандартный CSS, так и произвольные значения Tailwind.
Настраивайте свойства flex-контейнера (flex-direction, justify-content, align-items, flex-wrap, gap) и смотрите эквивалентный CSS и Tailwind-классы в режиме реального времени. Визуальный конструктор показывает, как элементы будут расположены при выбранных настройках. Поддерживаются все современные свойства flexbox: направление по строке/столбцу, выравнивание center/space-between и отступы gap, введённые в CSS Grid.
Конвертируйте абсолютные единицы (px, pt) в относительные (rem, em, vw, vh) и обратно. Используется указанный базовый размер шрифта (по умолчанию 16px) для точных вычислений rem/em. Конвертация следует стандартам W3C: 1rem = базовый размер шрифта, 1em = размер шрифта родителя, 1vw = 1% ширины viewport. Полезно для адаптивного дизайна и доступного масштабирования.
Вся генерация CSS происходит полностью в вашем браузере с использованием JavaScript. Вы получаете вывод как в виде чистого CSS, так и Tailwind CSS там, где это применимо. Сгенерированный код готов к использованию в продакшн и может быть скопирован непосредственно в ваши таблицы стилей. Взаимодействие с сервером не происходит — инструмент работает полностью офлайн после загрузки.
Этот инструмент генерирует box shadows (одиночный или многослойный), flexbox-макеты (свойства контейнера и элементов) и конвертирует между единицами CSS (px, rem, em, %).