HTML5/CSS3 Cool Shadows Glowing Text Effects Combination

HTML5/CSS3 Cool Shadows Glowing Text Effects Combination: BY Timothy15 Jan,2021; Tags:
Text Effects HTML5 Text

Introduction

Today we want to introduce you to a very cool HTML5/CSS3 shadow text effects, a total of nine different groups of styles, the nine groups of text, in addition to different fonts, each group of text shadows and text glow color are different, look very beautiful, unfortunately, Chinese is not so beautiful fonts.

HTML5/CSS3 Cool Shadows Glowing Text Effects Combination

Instructions

HTML Body Code

const signs = document.querySelectorAll('x-sign')
const randomIn = (min, max) => (
  Math.floor(Math.random() * (max - min + 1) + min)
)

const mixupInterval = el => {
  const ms = randomIn(2000, 4000)
  el.style.setProperty('--interval', `${ms}ms`)
}

signs.forEach(el => {
  mixupInterval(el)
  el.addEventListener('webkitAnimationIteration', () => {
    mixupInterval(el)
  })
})

Css Code

html {
  background: #090000;
  font-size: calc(1em + 3vmax);
  line-height: 1.1;
  text-align: center;
}

body {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: repeat(auto-fit, minmax(0, 12ch));
  align-items: center;
  align-content: center;
  justify-content: center;
}

x-sign {
  --interval: 1s;
  display: block;
  text-shadow: 
    0 0 10px var(--color1),
    0 0 20px var(--color2),
    0 0 40px var(--color3),
    0 0 80px var(--color4);
  will-change: filter, color;
  filter: saturate(60%);
  animation: flicker steps(100) var(--interval) 1s infinite;
}

VIEW NOW