Генератор css обводки текста

Если нужно сделать обводку для текста на css, этот инструмент позволяет настроить обовдку визуально и затем скопировать код подробное описание
2px
Пример текста
/* CSS-код появится здесь */

Описание приложения «Генератор css обводки текста»

Nil
опубликовано 23 сентября 2025
обновлено 23 сентября 2025
Этот конструктор обводки для текста позволяет создать обводку для текста в режиме визуализации и без знания css правил.

Просто укажите, какой цвет желаете для самого текста, какого цвета должна быть обводка и потом настройте желаемую толщину текста.

Стоит иметь ввиду, что обводка для текста хорошо смотрится только при использовании крупного размера шрифта. При уменьшении размера шрифта овбодка может сливаться. Также имеет значение используемый шрифт. С некоторыми шрифтами обводка может выглядеть иначе, чем здесь.

Как применить полученный код к тексту на своём сайте:

Скопируйте css код, пример

Код HTML:
  1.  
  2. .preview-text {
  3.     color: #ebce0f;
  4.     -webkit-text-stroke: 3.5px #0057a8;
  5.     text-stroke: 3.5px #0057a8;
  6.     /* Для поддержки в Firefox и др. */
  7.     text-shadow:
  8.         #0057a8 1px 0,
  9.         #0057a8 0.707px 0.707px,
  10.         #0057a8 0 1px,
  11.         #0057a8 -0.707px 0.707px,
  12.         #0057a8 -1px 0,
  13.         #0057a8 -0.707px -0.707px,
  14.         #0057a8 0 -1px,
  15.         #0057a8 0.707px -0.707px;
  16. }
  17.  
и вставьте его в свой файл стилей или на странице в секции < head> < /head>, между тегами < style> < /style>

Присвойте нужному тексту класс preview-text. Например заголовок страницы размещён между тегами h1 вы можете присвоить нужный класс этому тегу так: < h1 class="preview-text"> заоловок < /h1>

Или при импорте скопированного текста, уберите указание на класс

Код HTML:
  1.  
  2. .preview-text{ 
  3. ...
  4.  } 
  5.  
и добавьте оставшися код стилей к нужному тегу или классу в вашем файле стилей. Например у вас в файле стилей уже есть описание для тега h1

Код HTML:
  1.  
  2. h1{
  3. font-size:32px;
  4. }
  5.  
добавьте стили для создания обводки

Код HTML:
  1.  
  2. h1{
  3. font-size:32px;
  4.  
  5.     color: #ebce0f;
  6.     -webkit-text-stroke: 3.5px #0057a8;
  7.     text-stroke: 3.5px #0057a8;
  8.     /* Для поддержки в Firefox и др. */
  9.     text-shadow:
  10.         #0057a8 1px 0,
  11.         #0057a8 0.707px 0.707px,
  12.         #0057a8 0 1px,
  13.         #0057a8 -0.707px 0.707px,
  14.         #0057a8 -1px 0,
  15.         #0057a8 -0.707px -0.707px,
  16.         #0057a8 0 -1px,
  17.         #0057a8 0.707px -0.707px;
  18. }
  19.  
  20.  

Другие приложения

Комментарии

Добавить комментарий