Outline effect to text
Are there any ways in CSS to give outlines to text with different colors ? I want to highlight some parts of my text to make it more intuitive — like the names, links, etc. Changing the link colors etc. are common nowadays, so I want something new.
@Dan Better implies different. Your advice is generally good but it can also stifle creative experimenting. Furthermore, it’s usually not “common = good” … rather, it’s “common = barely good enough”.
Can you describe what you need in more detail. I’m not exactly sure what you mean when you say that you want to ‘give outlines to text with different colors’
17 Answers 17
There is an experimental webkit property called text-stroke in CSS3, I’ve been trying to get this to work for some time but have been unsuccessful so far.
What I have done instead is used the already supported text-shadow property (supported in Chrome, Firefox, Opera, and IE 9 I believe).
Use four shadows to simulate a stroked text:
This text should have a stroke in some browsers As Jason C has mentioned in the comments, the text-shadow CSS property is now supported by all major browsers, with the exception of Opera Mini. Where this solution will work for backwards compatibility (not really an issue regarding browsers that auto-update) I believe the text-stroke CSS should be used.
Sadly, IE doesn’t support text-shadow till IE10. Oddly enough, IE9 supports box-shadow but not text-shadow .
Here is a summary of browser support for text-shadow . It seems that currently (3 years after this answer was posted) it is supported by all major browsers with the exception of Opera Mini, which shows «partial support» (it ignores blur-radius ).
Jason C pointed out text-shadow support, not text-stroke . Which is only supported by webkit at this time.
Note that text-shadow trick fails when your text color uses transparency/alpha, as the shadow will appear under the text.
Easy! SVG to the rescue.
This is a simplified method:
svg < font : bold 70px Century Gothic, Arial; width : 100%; height : 120px; >text < fill : none; stroke : black; stroke-width : .5px; stroke-linejoin : round; animation : 2s pulsate infinite; >@keyframes pulsate < 50%< stroke-width:5px >>CSS-only:
If you want a thick stroke, please read my other Stackoverflow answer
💡 Note that as of writing, the -webkit-text-stroke property cannot be transitioned/animated.
This is a great solution and has none of the performance issues associated with text-shadow. The difference in performance between this approach and stacking up multiple text-shadows is huge for my particular application (IE 10 on large screen displays).
That’s pure gold dude!! Very professional and skilled approach, perfect answered the question! This solution is ahead of W3 Council or Google or whatever, congratulations!
For svg, I found the answer below better (specially the update), since stroking looks really bad with small font-sizes or large thicknesses.
Edit: text-stroke is now fairly mature and implemented in most browsers. It is easier, sharper and more precise. If your browser audience can support it, you should now use text-stroke first, instead of text-shadow .
You can and should do this with just the text-shadow effect without any offsets:
Why? When you offset multiple shadow effects, you’ll begin to notice ungainly, jagged corners:
Having text-shadow effects in just one position eliminates the offsets, meaning If you feel that’s too thin and would prefer a darker outline instead, no problem — you can repeat the same effect (keeping the same position and blur), several times. Like so:
text-shadow: #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px; Here’s a sample of just one effect (top), and the same effect repeated 14 times (bottom):
Also note: Because the lines become so thin, it’s a very good idea to turn off sub-pixel rendering using
-webkit-font-smoothing: antialiased .
Interesting answer, thanks. I don’t really understand what you mean by ‘repeating’ the effect though.
I note the comment added to the answer that text-stroke is now supported in most browsers, but caniuse is still (Aug 2016) showing it as unsupported in all versions of IE and Edge, and needing -webkit-text-stroke with the layout.css.prefixes.webkit flag enabled in Firefox. Methinks that’s not widespread enough support for general public sites.
I think that repeating 14 times a text-shadow could have some performance issue. Especially when scrolling on mobile.
AFAIK text-stroke is not the same as outline via text-shadow . text-stroke has no option to make the outline appear outside the text which means the outline bleeds into the text making it often look really horrible. In other words text-stroke is not a replacement for text-shadow for outlines
Just adding this answer. «Stroking» the text is not the same as «Outlining».
Outlining looks great. Stroking looks horrid.
The SVG solution listed elsewhere has the same issue. If you want an outline you need to put the text twice. Once stroked and again not stroked.
Stroking IS NOT Outlining
body < font-family: sans-serif; margin: 20px; >.stroked < color: white; -webkit-text-stroke: 1px black; >.thickStroked < color: white; -webkit-text-stroke: 10px black; >.outlined < color: white; text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000; >.thickOutlined < color: white; text-shadow: 0.0px 10.0px 0.02px #000, 9.8px 2.1px 0.02px #000, 4.2px -9.1px 0.02px #000, -8.0px -6.0px 0.02px #000, -7.6px 6.5px 0.02px #000, 4.8px 8.8px 0.02px #000, 9.6px -2.8px 0.02px #000, -0.7px -10.0px 0.02px #000, -9.9px -1.5px 0.02px #000, -3.5px 9.4px 0.02px #000, 8.4px 5.4px 0.02px #000, 7.1px -7.0px 0.02px #000, -5.4px -8.4px 0.02px #000, -9.4px 3.5px 0.02px #000, 1.4px 9.9px 0.02px #000, 10.0px 0.8px 0.02px #000, 2.9px -9.6px 0.02px #000, -8.7px -4.8px 0.02px #000, -6.6px 7.5px 0.02px #000, 5.9px 8.0px 0.02px #000, 9.1px -4.1px 0.02px #000, -2.1px -9.8px 0.02px #000, -10.0px -0.1px 0.02px #000, -2.2px 9.8px 0.02px #000, 9.1px 4.2px 0.02px #000, 6.1px -8.0px 0.02px #000, -6.5px -7.6px 0.02px #000, -8.8px 4.7px 0.02px #000, 2.7px 9.6px 0.02px #000, 10.0px -0.6px 0.02px #000, 1.5px -9.9px 0.02px #000, -9.3px -3.6px 0.02px #000, -5.5px 8.4px 0.02px #000, 7.0px 7.2px 0.02px #000, 8.5px -5.3px 0.02px #000, -3.4px -9.4px 0.02px #000, -9.9px 1.3px 0.02px #000, -0.8px 10.0px 0.02px #000, 9.6px 2.9px 0.02px #000, 4.9px -8.7px 0.02px #000, -7.5px -6.7px 0.02px #000, -8.1px 5.9px 0.02px #000, 4.0px 9.2px 0.02px #000, 9.8px -2.0px 0.02px #000, 0.2px -10.0px 0.02px #000, -9.7px -2.3px 0.02px #000, -4.3px 9.0px 0.02px #000, 7.9px 6.1px 0.02px #000 >svg < font-size: 40px; font-weight: bold; width: 450px; height: 70px; fill: white; >.svgStroke
Properly stroked! Properly outlined! Thickly stroked! Thickly outlined!
PS: I’d love to know how to make the SVG be the correct size of any arbitrary text. I have a feeling it’s fairly complicated involving generating the SVG, querying it with Javascript to get the extents, then applying the results. If there is an easier non-JS way, I’d love to know.
Update: As @12me21 points out, in SVG you can use paint-order=»stroke» to make it stroke before filling and then you don’t have to repeat the text
Excellent this is the correct method, outlining, not stroking. Works beautifully and it neat and easy on the eyes.
Upvoted. If one only wants to have 1px thickness, an alternative with similar results is: filter: drop-shadow(1px 0px 0px black) drop-shadow(-1px 0px 0px black) drop-shadow(0px 1px 0px black) drop-shadow(0px -1px 0px black); .
You could try stacking multiple blured shadows until the shadows look like a stroke, like so:
I mention it just in case someone’s interested, although I wouldn’t call it a solution because it fails in various ways:
- it doesn’t work in old IE
- it renders quite differently in every browser
- applying so many shadows is very heavy to process :S
This is fantastic. The extra layers of shadowing really add some depth to it, and it works in IE11, FF36, and Chrome 41.
I was looking for a cross-browser text-stroke solution that works when overlaid on background images. think I have a solution for this that doesn’t involve extra mark-up, js and works in IE7-9 (I haven’t tested 6), and doesn’t cause aliasing problems.
This is a combination of using CSS3 text-shadow, which has good support except IE (http://caniuse.com/#search=text-shadow), then using a combination of filters for IE. CSS3 text-stroke support is poor at the moment.
David Hewitt’s answer involved adding dropshadow filters in a combination of directions. ClearType is then removed unfortunately so we end up with badly aliased text.
I then combined some of the elements suggested on useragentman with the dropshadow filters.
Putting it together
This example would be black text with a white stroke. I’m using conditional html classes by the way to target IE (http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/).
#myelement < color: #000000; text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff; >html.ie7 #myelement, html.ie8 #myelement, html.ie9 #myelement
This mixin for SASS will give smooth results, using 8-axis:
@mixin stroke($size: 1px, $color: #000) < text-shadow: -#-# 0 $color, 0 -# 0 $color, # -# 0 $color, # 0 0 $color, # # 0 $color, 0 # 0 $color, -# # 0 $color, -# 0 0 $color; > text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000; I got better results with 6 different shadows:
I wanted a bigger shadow, and had to add a couple of extra lines. 3px 0px 0 #343a7e, -3px 0px 0 #343a7e
Just heads up that even in 2020 this does not work with variadic fonts. github.com/rsms/inter/issues/292
Working with thicker strokes gets a bit messy, if you have the pleasure of sass try this mixin, not perfect and depending on stroke weight it generates a fair amount of css.
@mixin stroke($width, $colour: #000000) < $shadow: 0 0 0 $colour; // doesn't do anything but I couldn't work out how to create a blank string and maintain commas @for $i from 0 through $width < $shadow: $shadow, -$i + px -$width + px 0 $colour, $i + px -$width + px 0 $colour, -$i + px $width + px 0 $colour, $i + px $width + px 0 $colour, -$width + px -$i + px 0 $colour, $width + px -$i + px 0 $colour, -$width + px $i + px 0 $colour, $width + px $i + px 0 $colour, >text-shadow: $shadow; > Just piece of cake. Try this instead of using text-shadow
I had this issue as well, and the text-shadow wasn’t an option because the corners would look bad (unless I had many many shadows), and I didn’t want any blur, therefore my only other option was to do the following: Have 2 divs, and for the background div, put a -webkit-text-stroke on it, which then allows for as big of an outline as you like.
outline text outline text Using this, I was able to achieve an outline, because the stroke-width method was not an option if you want your text to remain legible with a very large outline (because with stroke-width the outline will start inside the lettering which makes it not legible when the width gets larger than the letters.
Note: the reason I needed such a fat outline was I was emulating the street labels in «google maps» and I wanted a fat white halo around the text. This solution worked perfectly for me.
Text Shadow Generator
There are lots of great answers here. It would appear the text-shadow is probably the most reliable way to do this. I won’t go into detail about how to do this with text-shadow since others have already done that, but the basic idea is that you create multiple text shadows around the text element. The larger the text outline, the more text shadows you need.
All of the answers submitted (as of this posting) provide static solutions for the text-shadow. I have taken a different approach and have written this JSFiddle that accepts outline color, blur, and width values as inputs and generates the appropriate text-shadow property for your element. Just fill in the blanks, check the preview, and click to copy the css and paste it into your stylesheet.
Needless Appendix
Apparently, answers that include a link to a JSFiddle cannot be posted unless they also contain code. You can completely ignore this appendix if you want to. This is the JavaScript from my fiddle that generates the text-shadow property. Please note that you do not need to implement this code in your own works:
function computeStyle() < var width = document.querySelector('#outline-width').value; width = (width === '') ? 0 : Number.parseFloat(width); var blur = document.querySelector('#outline-blur').value; blur = (blur === '') ? 0 : Number.parseFloat(blur); var color = document.querySelector('#outline-color').value; if (width < 1 || color === '') < document.querySelector('.css-property').innerText = ''; return; >var style = 'text-shadow: '; var indent = false; for (var i = -1 * width; i > > style = style.substring(0, style.length - 2) + '\n;'; document.querySelector('.css-property').innerText = style; var exampleBackground = document.querySelector('#example-bg'); var exampleText = document.querySelector('#example-text'); exampleBackground.style.backgroundColor = getOppositeColor(color); exampleText.style.color = getOppositeColor(color); var textShadow = style.replace(/text-shadow: /, '').replace(/\n/g, '').replace(/.$/, '').replace(/\u00a0\u00a0\u00a0\u00a0/g, ''); exampleText.style.textShadow = textShadow; > HTML Black Code
This page contains HTML code for coloring an element black. Typically, you might be changing the color of text or the background color of that text or another element. But you can also use HTML color codes to change the color of an element’s border.
Black Text
However, depending on how much text you need to color, you could apply the styles against a tag (for all text within that element) or even the tag (for all text on the page).
Here’s the same thing, but this time using embedded styles.
You could also place the CSS code into a external style sheet.
Black Background Color
You can set the background color of an element to black by using the CSS background-color property or the background shorthand property. If you do this, you will need to ensure that any text (or foreground element) is not black, in order for it to be visible.
Black Border Color
When you use CSS to create a border around an element, you need to specify the border’s color.
Black Color Codes
The above examples use black as the color value. I could just as easily used the hexadecimal or RGB color values and the result would’ve been the same.
Here are the various methods of specifying the color black in HTML.
Black text (hexadecimal #000000)
Black text (hexadecimal shorthand #000)
Black text (RGB value rgb(0,0,0))
Shades of Black
Here are some different shades of blacks & grays that can be used instead of just plain old «black».