0

введите сюда описание изображения

Сам текст градиент - и вокруг текста text-shadow

Есть 2 варианта:

.block {
  background: #000;
  padding:20px;
}
.counter {
    font-family:arial;
    color: #8da8e5;
    font-weight: bold;
    text-shadow: 0px -1px 14px #061a83, 0px 0px 26px #061a83, 0px -1px   14px #061a83, 0px -1px 14px #001479, 0px -1px 14px #7289ff;
    font-size: 28px;
}

.counter2 {
    font-family:arial;
    text-shadow: 0 0 35px #2958cb;
    background: -webkit-linear-gradient(#ffffff, #4f6a92);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 28px;
    font-weight:bold;
 }
<div class="block"><span class="counter">9191</span></div>
<div class="block"><span class="counter2">9191</span></div>

Оба не то, во втором же случае где градиент, то text-shadow - накладывается поверх.

Как сделать максимально похожий стиль как на картинке?

1 ответ 1

1

Ну вот так по-моему довольно похоже вышло. http://codepen.io/Odinokun/pen/aJwQaJ

* {
  margin: 0;
  padding: 0;
}

.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #000;
}

h1 {
  font-family: Arial;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 48px;
  background: linear-gradient(#fff, #6383b0);
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 0px 0px 50px rgba(0, 86, 255, 1);
}
<div class="wrap">
  <h1>Odinokun 9478</h1>
</div>

1
  • Ты лучший, спасибо :)
    – stoner
    Commented 14 мар. 2017 в 10:08

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.