Бесплатно Онлайн Генератор CSS: тени и сетка
Проектируйте CSS визуально, а не подбирая числа наугад. В режиме блока двигайте ползунки смещения тени, размытия, растяжения, радиуса углов, цвета и непрозрачности, при желании включите внутреннюю тень и наблюдайте за живым предпросмотром. В режиме сетки задайте число столбцов, промежуток, количество элементов и высоту строки, чтобы построить адаптивную сетку. Подходящий CSS генерируется по ходу работы — скопируйте его прямо в свою таблицу стилей. Всё выполняется в вашем браузере.
Загрузка инструмента…
Как использовать Генератор CSS: тени и сетка
- Выберите «Тень и радиус блока» или «Раскладка сетки».
- Двигайте ползунки, чтобы настроить эффект.
- Смотрите, как предпросмотр и CSS обновляются в реальном времени.
- Скопируйте готовый CSS в свой проект.
Вопросы про Генератор CSS: тени и сетка
Какой CSS он генерирует?
Стандартный CSS, готовый к копированию: правило .box с background, border-radius и box-shadow или правило .grid с display:grid, grid-template-columns и gap. Для этих свойств в современных браузерах вендорные префиксы не нужны.
Можно ли использовать CSS сетки на реальном сайте?
Да. Правило сетки использует repeat() и дробные столбцы, поэтому оно адаптивное. Вставьте его в свою таблицу стилей и поместите содержимое внутрь контейнера сетки.
Об инструменте Генератор CSS: тени и сетка
Создавайте CSS-тени и сеточные макеты с бесплатным онлайн-инструментом Генератор CSS: тени и сетка. 100% в браузере, без входа и загрузки файлов.
Эти инструменты текста и кода чистят и преобразуют строки: считают слова, меняют регистр, убирают дубли строк, кодируют/декодируют Base64 и URL, экранируют сущности, хешируют, форматируют JSON и сравнивают две версии.
Инструмент работает в браузере. Файл никуда не загружается. Всё выполняется над вставленным текстом, поэтому можно безопасно обрабатывать фрагменты кода или логов; ничего никуда не отправляется, а очистка поля убирает его из памяти.