Grow your CSS skills. Land your dream job.

Last updated on:

Text Dripping Blood

.blood {
       color:silver;
       text-shadow:
       4px 4px 1px #300000,
       4px 6px 1px #400000,
       4px 8px 1px #500000,
       4px 10px 1px #600000,
       4px 12px 1px #700000,
       4px 14px 1px #800000,
       4px 16px 1px #900000,
       4px 18px 1px #A00000,
       4px 20px 1px #B00000,
       4px 22px 1px #C00000,
       4px 24px 1px #D00000,
       4px 26px 1px #E00000,
       4px 28px 1px #F00000,
       4px 30px 1px #FA0000,
       4px 32px 1px #FB0000,
       4px 34px 1px #FC0000,
       4px 36px 1px #FD0000,
       4px 38px 1px #FE0000,
       4px 40px 2px #FF0000;
}
<h1 class="blood">Vampire!</h1>

Vampire!

Reference URL

Comments

  1. While I would never in my life use that particular styling, it is cool to see all the things you really can do with text-shadow. Can you do something similiar with -moz-border-radius and -webkit-border-radius? Don’t know exactly why you would but it might have some cool effects, will definitely be screwing around with that later.

  2. Permalink to comment#

    Looks like its time for experimenting

  3. Find all scary and horrible Halloween Fonts of vampires, pumpkin, witches and ghosts on our site = Halloween Fonts.

  4. That’s some pretty awesome stuff I’m going to change the headings on all of my clients’ websites. They’ll be so excited. I’d probably have to go back to swinging a hammer shortly after.

    On the bloody text topic, check out Bloody Finger Mail, a flash app by Engine Digital here in Canada.

  5. Saadulla
    Permalink to comment#

    Very Nice idea! :)

  6. BERT thePenguin
    Permalink to comment#

    If you combine it with sparkles you can make a website for that friend that’s obsessed with Twilight.

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".