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
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:
|
1 2 |
-webkit-text-stroke: 5px rgba(255,255,255,.01); -webkit-background-clip: text; |
Here is the HTML you’ll need:
|
1 |
<p><span>H</span><span>o</span><span>l</span><span>y</span> <span>F</span><span>e</span><span>t</span><span>c</span><span>h</span><span>a</span><span>m</span><span>o</span><span>l</span><span>y</span> <span>!</span></p> |
Here is the magic CSS you’ll need:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
p{ text-align:center; margin-bottom:0; font-size:64pt; } a{ color:white; } h5{ text-align:center; color:#bbb; font-weight:normal; text-shadow:-1px -1px 1px black; font-family:Verdana; } span{ cursor:pointer; -webkit-transition-property: background; -webkit-transition-duration: 3s; -webkit-transition-timing-function: ease-out; color:#222; text-shadow:0px 0px 5px white; z-index:3; background: -webkit-linear-gradient(left, rgba(255,0,0,1) 0%,rgba(255,255,0,1) 19%,rgba(0,255,0,1) 38%,rgba(0,255,255,1) 51%,rgba(0,0,255,1) 67%,rgba(255,0,255,1) 83%,rgba(255,0,0,1) 99%); /* Chrome10+,Safari5.1+ */ -webkit-text-stroke: 5px rgba(255,255,255,.01); -webkit-background-clip: text; } span:hover{ -webkit-transition-property: background; -webkit-transition-duration: 2s; -webkit-transition-timing-function: ease-out; background: -webkit-linear-gradient(right, rgba(255,0,0,1) 0%,rgba(255,255,0,1) 19%,rgba(0,255,0,1) 38%,rgba(0,255,255,1) 51%,rgba(0,0,255,1) 67%,rgba(255,0,255,1) 83%,rgba(255,0,0,1) 99%); /* Chrome10+,Safari5.1+ */ background-position:100px; -webkit-background-clip: text; } |
Here is a working demo:
Feb 10, 2016 @ 22:26:14
great but it does not work in chrome
Feb 10, 2016 @ 22:26:52
sorry i meant firefox