Text Shadow Examples

by Shashank D

HTML

<p>text shadow</p>
        <p>text shadow</p>
        <p>text shadow</p>
        <p>text shadow</p>
        <p>text shadow</p>
        <p>text shadow</p>
        <p>text shadow</p>
        <p>text shadow</p>
        <p>text shadow</p>
        <p>text shadow</p>
        <p>text shadow</p>
        <p>text shadow</p>
        <p>text shadow</p>
        <p>text shadow</p>
        <p>text shadow</p>

CSS

p { 
    font-family:verdana,arial,sans-serif;
    font-size:28px;
    margin:5px 10px;
    color: rgb(0, 123, 255)!important;
}

p:nth-child(1) {
    text-shadow:1px 1px 2px #f00;
}

p:nth-child(2) {
    text-shadow:2px 2px 2px #aaa;
}

p:nth-child(3) {
    text-shadow:-2px -2px 2px #aaa;
}

p:nth-child(4) {
    color:#fff;
    text-shadow:2px 2px 2px #000;
}

p:nth-child(5) {
    color:#fff;
    text-shadow:0 0 5px #000;
}

p:nth-child(6) {
    color:transparent;
    text-shadow:0 0 5px #000;
}

p:nth-child(7) {
    text-shadow:2px 2px 0 #aaa;
}

p:nth-child(8) {
    text-shadow:1px 1px 0 #fff, 2px 2px 0 #000;
}

p:nth-child(9) {
    text-shadow:1px 1px 0 #fff, 2px 2px 0 #aaa;
}

p:nth-child(10) {
    text-shadow:30px 10px 0 #aaa;
}

p:nth-child(11) {
    color:#000;
    text-shadow:1px 1px 0 red, 2px 2px 0 orange, 3px 3px 0 yellow, 4px 4px 0 green, 5px 5px 0 blue, 6px 6px 0 indigo, 7px 7px 0 violet;
}

p:nth-child(12) {
    color:#fff;
    text-shadow:-1px -1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,1px 1px 0 #000;
}

p:nth-child(13) {
    color:#fff;
    text-shadow:-1px -1px 2px #000,-1px 1px 2px #000,1px -1px 2px #000,1px 1px 2px #000;
}

p:nth-child(14) {
    color:rgba(0,0,0,0.5);
    text-shadow:3px 3px 0 #aaa;
}