Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
What is the Outline Effect to Text?
The outline effect for text creates the appearance of hollow text by showing only the border/stroke while making the interior transparent or matching the background color. This effect is commonly used for headings, logos, and decorative text elements.
Syntax
/* Method 1: Using webkit properties */ -webkit-text-stroke: width color; -webkit-text-fill-color: transparent; /* Method 2: Using text-shadow */ text-shadow: x y blur color, x y blur color; /* Method 3: Using SVG */ stroke: color; fill: transparent; stroke-width: width;
Method 1: Using Webkit Text Properties
The most straightforward approach uses -webkit-text-stroke and -webkit-text-fill-color properties to create clean text outlines.
Example 1: Basic Text Outline
<!DOCTYPE html>
<html>
<head>
<style>
.outline-text {
font-size: 50px;
font-weight: bold;
-webkit-text-stroke: 2px blue;
-webkit-text-fill-color: transparent;
text-align: center;
margin: 20px;
}
</style>
</head>
<body>
<div class="outline-text">Outline Text Effect</div>
</body>
</html>
Large text with blue outline and transparent fill, creating a hollow text effect.
Example 2: Colored Background with Outline
<!DOCTYPE html>
<html>
<head>
<style>
.background-text {
background-color: #ff6b6b;
padding: 20px;
font-size: 45px;
font-weight: bold;
-webkit-text-stroke: 1.5px white;
-webkit-text-fill-color: #ff6b6b;
text-align: center;
}
</style>
</head>
<body>
<div class="background-text">Text on Colored Background</div>
</body>
</html>
White outlined text on a red background where the text fill matches the background color.
Method 2: Using Text-Shadow
This method uses multiple text shadows positioned around the text to simulate an outline effect
Example 3: Text-Shadow Outline
<!DOCTYPE html>
<html>
<head>
<style>
.shadow-outline {
font-size: 50px;
font-weight: bold;
color: transparent;
text-shadow:
-2px -2px 0 #333,
2px -2px 0 #333,
-2px 2px 0 #333,
2px 2px 0 #333;
text-align: center;
margin: 20px;
}
</style>
</head>
<body>
<div class="shadow-outline">Shadow Outline Text</div>
</body>
</html>
Text with dark gray outline created using multiple text shadows, with transparent text fill.
Method 3: Using SVG Text
SVG provides the most control over text styling with native stroke and fill properties
Example 4: SVG Text Outline
<!DOCTYPE html>
<html>
<head>
<style>
svg {
width: 100%;
height: 100px;
}
.svg-text {
font-size: 36px;
font-weight: bold;
fill: transparent;
stroke: #e74c3c;
stroke-width: 2px;
stroke-linejoin: round;
}
</style>
</head>
<body>
<svg viewBox="0 0 500 80">
<text class="svg-text" x="20" y="50">SVG Outline Text</text>
</svg>
</body>
</html>
Clean red outlined text created using SVG with transparent fill and rounded line joins.
Browser Support
| Method | Browser Support | Best For |
|---|---|---|
| Webkit Properties | Webkit browsers (Chrome, Safari) | Simple outlines |
| Text-Shadow | All modern browsers | Cross-browser compatibility |
| SVG | All modern browsers | Complex styling and animations |
Conclusion
Text outline effects can be achieved through webkit properties for clean results, text-shadow for broader compatibility, or SVG for maximum control. Choose the method based on your design requirements and browser support needs.
490 Views
