Skip to content

Instantly share code, notes, and snippets.

Created September 6, 2017 06:27
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
Neon Text Effect
<div class="container">
<h1 class="neon">Everything you want is<br>on the other side of fear</h1>

Neon Text Effect

I saw this quote written in neon in the movie "Atomic Blonde" and I got inspired.

A Pen by Matt Smith on CodePen.


:root {
font-size: calc(1vw + 1vh + 1.5vmin);
body {
background-color: #010a00;
background-image: url("");
font-size: 1rem;
h1 {
font-weight: 400;
text-align: center;
text-transform: uppercase;
.neon {
color: #fff;
0 0 5px #fff,
0 0 10px #fff,
0 0 20px #fff,
0 0 40px #0ff,
0 0 80px #0ff,
0 0 90px #0ff,
0 0 100px #0ff,
0 0 150px #0ff;
<link href="" rel="stylesheet" />
<link href="" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment