css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

This pen experiments with some simple text effects you can create using text-shadow and hover transitions. I’ve also played around with creating a patterned hover text effect, mixing those effects with a bit of SVG.

Created by Ashley Nolan.

Twitter: https://twitter.com/AshNolan_

More Pens created by me : http://codepen.io/ashleynolan/


  1. Some of the functions you are declaring already exist in codePen by default: I never use compass but very often make use of sin($n) and cos($n) and pi()
    Tester: http://codepen.io/pixelass/pen/azWLOG

    Anyways.. nice pen.

  2. Ah, didn’t realise they were included in the CodePen default settings – I’ll edit it and put them in as a comment at the bottom of the code. Thanks :)

  3. Its awsome! Thx for this examples!!

  4. Hi Ash,

    This is a very rudimentary question - I'm an art director fresh to coding / svg. I tried to re-create this file on my computer, created and linked a separate .css to the html file. Do I need to create a separate .svg file as well? If so, what goes into it? Really cool effect - enjoying the learning process. - Yelena

  5. Hi Yelana,

    I’ve setup a github repo with how I have done it outside of CodePen – so with separate HTML and CSS files. The SVG is a part of the HTML. Here’s a link to the repo https://github.com/ashleynolan/css-text-shadow-effects.

    Hope that helps!

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.