Создать CSS визуально
Четыре куска CSS, которые все пишут методом проб и ошибок, — только пробы и ошибки происходят на ползунках, а не в вашей таблице стилей.
- Работает целиком в вашем браузере
- Работает без интернета
- Без отправки файлов
- Без регистрации
- Без водяных знаков
Загружаем инструмент…
Как это работает
- Выберите панель: градиент, тень, углы или плавный размер.
- Двигайте ползунки, пока предпросмотр не станет таким, как нужно.
- Скопируйте строку CSS.
Почему ничего не отправляется на сервер
Всё, что делает эта страница, выполняет код внутри вкладки вашего браузера — тем же движком, который рисует веб-страницы. Файл читается с диска в память вкладки, преобразуется там и записывается обратно как загружаемый файл. Он никуда не отправляется — ни нам, ни третьей стороне.
Проверьте сами
- Откройте инструменты разработчика в браузере (F12) и перейдите на вкладку «Сеть» (Network).
- Загрузите свой файл и запустите инструмент.
- Единственные запросы, которые вы увидите, — это код самого инструмента, а у нескольких тяжёлых инструментов ещё и их открытый движок из публичного CDN, плюс один небольшой сигнал о просмотре страницы на loreatec.jp (адрес и заголовок страницы, больше ничего). Ни один из них не несёт ваш файл.
Частые вопросы
Что на самом деле считает панель clamp()?
Линейный наклон. Вы задаёте «16px при ширине экрана 360px, 32px при 1280px» — и получаете clamp(16px, 8.3px + 2.17vw, 32px): значение плавно меняется между двумя ширинами и останавливается на обоих концах. Формула простая, но её никто не помнит наизусть — в этом и весь смысл инструмента.
Почему готовые тени выглядят лучше тех, что я пишу руками?
Потому что у реалистичных теней меньше непрозрачность, больше размытие и чуть отрицательный разброс (spread), чем подсказывает интуиция. Пресеты закладывают именно эти пропорции — оттолкнитесь от одного из них и подстройте, а не начинайте с 0 0 5px black.
Можно сделать неровные, органические формы углов?
Включите режим «по каждому углу» и задайте все четыре радиуса отдельно — большие противоположные углы дают форму листа или капли. Для полностью органических капель нужен синтаксис радиуса с двумя значениями, а это уже за пределами панели; здесь есть то, что реально используют на практике.
Что-нибудь отправляется куда-нибудь?
Нет. Предпросмотр — это div с применёнными к нему вашими стилями: более локальную вещь инструмент сделать просто не может.