0

I was wondering if it is possible to do the reverse of ... https://css-tricks.com/fun-with-blurred-text/ where I have non-blurred text but put some sort of filter around the text like a glow to make it legible. However, I don't want to make the whole image blurred as in Is it possible to use -webkit-filter: blur(); on background-image?

I tried the solution in White blur around blurred background + maintain text non-blur but that didn't give me the result I wanted because it creates a glowing box rather than just the text.

So basically say I have a dark background with some highlights and light text... enter image description here

I basically want some what of a dark frost effect around the letters. The background is doing parallax scroll so I don't want to put the frost effect on the initial position.

Archimedes Trajano
  • 35,625
  • 19
  • 175
  • 265

1 Answers1

3

This may solve your problem.

#main {
  background-image: url("https://i.stack.imgur.com/dquOn.png");
  padding:20px 50px;
  display:inline-block;
}
#main h1 {
  color: #fff;
  font-size: 48px;
  text-shadow:0 0 5px #f00, 0 0 10px #f90, 0 0 15px #f00;
  font-family: 'Poiret One', cursive;
  font-weight:normal;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link href="https://fonts.googleapis.com/css?family=Poiret+One&display=swap" rel="stylesheet">
</head>
<body>
  <div id="main">
    <h1>Archimedes Trajano</h1>
  </div>
</body>
</html>
Kumar Gaurav
  • 738
  • 4
  • 11