CSS3 Gradient Stroke on Text Effect

I happened upon this little method of creating text strokes that are gradient filled by chance! I was trying to replicate a fancy text effect I had done in Photoshop, and had a “maybe I could…” moment. As far as I know, this is the first such documented case of this little trick! If you like the effect, please link to this article for credit/inspiration.

You will need a webkit browser like Safari to see the results (Safari or Chrome)

Finished Product – What you’ll be creating

css gradient stroke text

The basic idea is that we create some text, and fill each letter of the text with a background gradient. We then add the text stroke to whatever width we like. The trick is making the stroke transparent! We then use the background-clip property set to text to make it so the gradient background gets clipped to our text outline, then we choose whatever color we want for our text! Sweet eh!

The main trick here is to use these CSS3 properties:

Here is the HTML you’ll need:

Here is the magic CSS you’ll need:

Here is a working demo:

2 Comments

  1. ritchie
    Feb 10, 2016 @ 22:26:14

    great but it does not work in chrome

    Reply

  2. ritchie
    Feb 10, 2016 @ 22:26:52

    sorry i meant firefox

    Reply

Leave a Reply

*