text-shadow: 0px 0px 7px #4466eeff, 0px 0px 14px #4466eee6, 0px 0px 28px #4466eeb3;Генератор теней CSS — это визуальный редактор для свойства CSS Text-Shadow. Вы настраиваете горизонтальное смещение, вертикальный смещение, радиус размытия, цвет и непрозрачность с помощью слайдеров и смотрите эффект рендеринга в образце текста, затем копируете точный CSS. Вместо того, чтобы угадывать значения пикселей и обновлять свою страницу, вы формируете тень напрямую и читаете код, который она создает.
Свойство Text-Shadow проще, чем Box-Shadow — оно не имеет радиуса спреда и ключевого слова Inset — но многослойность — это то, где оно становится мощным. Одно объявление может складывать несколько теней, каждая со своими смещением, размытостью и цветом. Слои склада — это то, как вы строите неоновые свечения, твердые контуры, ретро 3D надписи, эффекты тиснения высокой печати и длинные плоские тени. Написание их вручную несложно, поэтому этот инструмент управляет уровнями и выводит допустимое объявление, разделенное запятыми в правильном порядке рисования.
Все происходит в вашем браузере. Выберите предустановку, например, неоновое свечение или контур, настройте каждый слой, переключите предварительный просмотр между светлым и темным фоном, отредактируйте образец текста и скопируйте CSS. Ни аккаунта, ни загрузок, и он продолжает работать в автономном режиме после загрузки страницы.
Выберите пресет, например, мягкий, неоновый свечение, ретро 3D или контур, чтобы получить реалистичную исходную точку, или начните с одного теневого слоя по умолчанию и наращивайте его оттуда.
Перетащите горизонтальные и вертикальные ползунки сдвига и радиуса размытия, затем установите цвет тени и непрозрачность. Смотрите пример обновления текста мгновенно во время редактирования.
Добавьте дополнительные слои, чтобы создать свечение, контур или глубину 3D — несколько копий тени, прочитанные как выдавленный текст, а сложенные размытые копии читаются как свечение.
Скопируйте объявление Text-Shadow и вставьте его прямо в стили стилей или компонентов. Примените его к любому текстовому элементу, чтобы получить тот же эффект.
Сложите любое количество теневых слоев в одно объявление в правильном порядке краски сверху вниз, в котором строятся неоновые свечения, контуры и 3D-текст.
Ползунки для горизонтального и вертикального смещения и радиуса размытия, а также палитры цвета и непрозрачности, охватывают каждую часть грамматики теней текста.
Вы можете мгновенно редактировать текстовые обновления, и вы можете переключать фон между светлыми и темными, чтобы проверить, как эффект читается в обеих темах.
Кураторы для мягкого, жесткого, неонового свечения, ретро 3D, контуров, тиснения, огня и длинных теней дают вам проверенную отправную точку вместо чистого холста
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset — then copy production-ready CSS.
Create beautiful CSS gradients with live preview
Pick colors and convert between HEX, RGB, and HSL formats
0 comments
No comments yet. Be the first to share your thoughts!