By using the CSS FONT and TEXT properties, the style of the headline and the printed text on the web page can be highlighted and beautified.

TEXT properties:

  • color
  • background-color
  • text-shadow
  • text-decoration
  • text-align
  • text-transform

FONT properties:

  • font-size
  • font-weight
  • font-style
  • font-family
  • font-variant

CSS text style formatting with examples

In the following examples, we will demonstrate CSS styling with text formatting by adding webkit-stroke properties and text-shadow effects.

    <p class="c">CSS -webkit-text-stroke example</p>

<style>
      .c {
               font-size: 50px;
               font-weight: bold;
                text-align: center;
               font-family: "Arial Black", sans-serif;
               background-color: #FF4500;
               -webkit-text-fill-color: blue;
               -webkit-text-stroke: 2px lightgray;
    }
</style>

CSS -webkit-text-stroke example

    <p class="b">CSS text-shadow standard effect example</p>

<style>
      .b {
               text-align: center;
               font-weight: bold;
               font-size: 45px;
               color: white;
               text-shadow: 3px 3px 6px black;
    }
</style>

CSS text-shadow standard effect example

    <p class="m">CSS text-stroke and text-shadow combination</p>

<style>
      .m {
               text-align: center;
               font-size: 70px;
               font-weight: bold;
               color: darkslategray;
               background-color: #6495ED;
               -webkit-text-stroke: 2px #E0FFFF;
               text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666,
               0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
    }
</style>

CSS text-stroke and text-shadow combination

    <p class="blur">CSS text-shadow blur effect example</p>

<style>
      .blur {
               text-align: center;
               font-style: italic;
               font-weight: bold;
               font-size: 45px;
               color: #2F4F4F;
               text-shadow: 3px 3px 5px red;
    }
</style>

CSS text-shadow blur effect example

    <p class="a">CSS horizontal shadow example</p>
    <p class="aa">CSS vertical shadow example</p>
    <p class="aaa">CSS diagonally shadow example</p>

<style>
      p {
               font-family: "Arial Black";
               text-align: center;
               font-size: 45px;
               color: blue;
    }
      .a {          text-shadow: 3px 0px 0px red;     }
      .aa {        text-shadow: 0px 3px 0px red;     }
      .aaa {      text-shadow: 3px 3px 0px red;     }
</style>

CSS horizontal shadow example

CSS vertical shadow example

CSS diagonally shadow example

    <p class="neon">CSS text-shadow neon effect example</p>

<style>
      .neon {
               text-align: center;
               font-weight: bold;
               color: Coral;
               font-size: 55px;
               font-family: "Arial Black";
                background-color: black;
               -webkit-text-stroke: 2px red;
                text-shadow: 0 0 10px #FF7F50, 0 0 20px #DC143C, 0 0 30px #DC143C, 0 0 40px #DC143C;
    }
</style>

CSS text-shadow neon effect example

    <p class="d">CSS text-shadow inset effect example</p>

<style>
      .d {
               text-align: center;
               font-size: 60px;
               font-weight: bold;
               background-color: #6495ED;
               -webkit-background-clip: text;
               color: transparent;
               text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
    }
</style>

CSS text-shadow inset effect example

    <p class="angl">CSS Anaglyph Text Effect Example</p>

<style>
      .angl {
               position: relative;
               font-size: 50px;
               font-family: 'Arial Black', sans-serif;
               color: lime;
    }

      .angl:after {
                position: absolute;
               content: "CSS Anaglyph Text Effect Example";
               left: 1px;
               top: -5px;
               color: rgba(254, 0, 2, 1);
               mix-blend-mode: multiply;
    }
</style>

CSS Anaglyph Text Effect Example

<div id="vintage">
    <p>CSS text-shadow retro effect example</p>
</div>

<style>
      #vintage p {
               text-align: center;
               font-weight: bold;
               font-size: 60px;
               margin: 30px auto;
               font-family: Courier;
               text-transform: uppercase;
               color: #2F4F4F;
               text-shadow: 3px 3px 0 #eee, 4px 4px 0 #2F4F4F;
    }
</style>

CSS text-shadow retro effect example

<div id="max">
    <p class="g">CSS text style example</p>
    <p class="h">CSS text style example</p>
</div>

<style>
      #max {
             background-color: #00BFFF;
    }
      p {
               text-align: center;
               font-size:55px;
               font-weight: bold;
               text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
    }
      .g {
               color: red;
    }
      .h {
               color: white;
    }
</style>


CSS text-shadow 3d effect example

CSS text-shadow 3D effect example


JSFiddle


    <p class="abc">CSS multiple color shadow effect</p>

<style>
      .abc {
               text-align: center;
               font-size: 50px;
               color: #8A2BE2;
               font-weight: bold;
               text-shadow:
               0 0 4px white, 0 0 5px white,0 0 6px white, 0 0 7px yellow, 0 0 8px yellow,
               0 0 10px yellow, 0 0 11px yellow,0 0 12px yellow, 0 0 13px yellow, 0 0 14px yellow,
               0 0 16px yellow, 0 0 17px yellow,0 0 18px yellow, 0 0 19px yellow, 0 0 20px yellow,
               0 0 21px yellow, 0 0 22px yellow, 0 0 23px yellow,0 0 24px yellow,0 0 25px yellow,
               0 0 26px green, 0 0 27px green, 0 0 28px green,0 0 29px green,0 0 30px green,
               0 0 31px green, 0 0 32px green, 0 0 33px green,0 0 34px green,0 0 35px green,
               0 0 36px green, 0 0 37px green, 0 0 38px green,0 0 39px green,0 0 40px green,
               0 0 41px green, 0 0 42px green, 0 0 43px green,0 0 44px green,0 0 45px green;
    }

</style>

CSS multiple color shadow effect

    <p class="flame">CSS Blaze Effect Example</p>

<style>
      .flame {
               padding: 10px;
               text-align: center;
               font-size: 40px;
               background: #A0522D;
               font-family: 'Arial Black', sans-serif;
               color: Maroon;
               text-shadow:
               0 0 15px white, 0 0 16px white, 0 0 17px white,0 0 18px white, 0 0 19px white, 0 0 20px white,
               0 0 21px yellow, 0 0 22px yellow, 0 0 23px yellow,0 0 24px yellow,0 0 25px yellow,
               0 0 26px orange, 0 0 27px orange, 0 0 28px orange,0 0 29px orange,0 0 30px orange,
               0 0 31px red, 0 0 32px red, 0 0 33px red,0 0 34px red,0 0 35px red,
               0 0 36px darkred, 0 0 37px darkred, 0 0 38px darkred,0 0 39px darkred,0 0 40px darkred;
    }

</style>

CSS Blaze Effect Example

    <p class="abg">CSS multiple text-shadow effect</p>

<style>
      .abg {
               text-align: center;
               font-size: 50px;
               color: #800080;
               font-family: 'Arial Black', sans-serif;
               text-shadow: 3px 3px #ff0000, 5px 5px #00ff00, 8px 8px #0000FF;
    }

</style>

CSS multiple text-shadow effect


css text shadow effects