Text Dripping Blood

.blood {
       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>


Reference URL


  1. Jack Nycz
    Permalink to comment#

    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. jon
    Permalink to comment#

    Looks like its time for experimenting

  3. Scary
    Permalink to comment#

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

  4. Denis Leblanc
    Permalink to comment#

    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.

  7. Mohtisham ahmed
    Permalink to comment#

    nice work…

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.