LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

neon

CSS
@import url(https://fonts.googleapis.com/css?family=Nixie+One);

:root {
    /* Base font size */
    font-size: 10px;

    /* Change neon color */
    --neon-color: #f0d;
}

body {
    font-family: "Nixie One", sans-serif;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-color: #000;
    min-height: 100vh;
}

h1 {
    font-size: 13rem;
    color: #fff;
    padding: 3rem 6rem;
    border: 0.4rem solid #fff;
    border-radius: 3rem;
    text-transform: uppercase;
    -webkit-transform: rotate(-8deg);
            transform: rotate(-8deg);

    text-shadow: 
        -0.2rem -0.2rem 1rem #fff, 
        0.2rem 0.2rem 1rem #fff,
        0 0 2rem var(--neon-color), 
        0 0 4rem var(--neon-color),
        0 0 6rem var(--neon-color), 
        0 0 8rem var(--neon-color),
        0 0 10rem var(--neon-color);

    -webkit-box-shadow: 
        0 0 0.5rem #fff, 
        inset 0 0 0.5rem #fff,
        0 0 2rem var(--neon-color), 
        inset 0 0 2rem var(--neon-color),
        0 0 4rem var(--neon-color), 
        inset 0 0 4rem var(--neon-color);

            box-shadow: 
        0 0 0.5rem #fff, 
        inset 0 0 0.5rem #fff,
        0 0 2rem var(--neon-color), 
        inset 0 0 2rem var(--neon-color),
        0 0 4rem var(--neon-color), 
        inset 0 0 4rem var(--neon-color);
}

h1::-moz-selection {
    background-color: var(--neon-color);
}

h1::selection {
    background-color: var(--neon-color);
}

Description

This pen shows how the CSS text-shadow and box-shadow properties can be used to create a neon sign effect. Neon color can be changed by updating a single CSS variable.
Term
Sat, 01/13/2018 - 16:14

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv