3-D Text with Glow

by NPD

 
 
                
 1.3dText {
 2    position: absolute;
 3    top: 25%;
 4    right: 50%;
 5    transform: translate(50%,-50%);
 6    text-transform: uppercase;
 7    font-family: Coustard;
 8    letter-spacing: 0.05em;
 9    font-size: 8em;
10    font-weight: 600;
11    color: #c90000;
12    text-shadow:
13        0px 1px 1px #8c0101,  /*  x-offset, y-offset, blur, color  */
14        0px 2px 1px #8c0101,
15        0px 3px 1px #8c0101,
16        0px 4px 1px #8c0101,
17        0px 5px 1px #8c0101,
18        0px 6px 1px #8c0101,
19        0px 7px 1px #8c0101,
20        0px 8px 1px #8c0101,
21        0px 9px 1px #8c0101,
22        0px 6px 0.15em #c90000ac;  /* glow */
23}

0

Snippet Description:

CSS to give a 3-D effect to text/headers (all CSS is included, because we hand-wrote it in Codepen. Omit font styling as appropriate. ..

Snippet Details:

Current status

Public

This snippet has passed basic review, use with caution and at your own risk. See details provided by author in sidebar and click below to find out more.

Language

CSS

Codevault
NPD
Category

Styling

Rating
Voted: 0 by 0 user(s)
Wordpress Compatability
Not Specified
Set-up instructions

give your Header the class: 3dText

Further Information

The author has provided the following URL that may be helpful to setting up or using this snippet:

Author Profile URL:
Snippet Source:

Add your Comment:

Community Comments:

  • J
    Jack

    2 years ago

    Hmm didn't work for me. Do I add my text after the snippet? I did one space after then wrote my text. - Attempted w/Gutenberg Block Editor - paragraph - wordpress

Related Snippets: