Add Stroke to Text With CSS3

CSS3 comes with lots of new and exciting features which can be used to add sizzling effects to your HTML.

Quick Tip : CSS3 Color Changing Background

In this  post, we are going to add a stroke to our text with help of CSS3. To do this we are going to use -webkit-text-stroke and -webkit-text-fill-color properties.


HTML: 

<div class="large">"Success is a lousy teacher. It seduces smart people into thinking they can't lose."</div>

CSS:

.large {
	font-size: 46px;
	font-weight: 900;
	font-family: 'Chewy', cursive;
	 -webkit-text-fill-color: white;
	-webkit-text-stroke: 2px black;
}

-webkit-text-fill-color property accepts one parameter, name of color or color code. And -webkit-text-stroke accepts two arguments width of stroke and color of stroke.

Note: This will work only with Chrome and Safari as these properties are supported only by webkit browsers.

Leave a Comment.