How to replace text with CSS?

How to Add Text Outline with CSS?

Last Updated : 19 Nov, 2024

Since CSS does not provide a direct text-outline property, the CSS text-shadow property is used to create an outline effect around text by adding multiple shadows with offsets.

1. Using text-shadow Property

The text-shadow property is commonly used to add shadows to text, by applying multiple shadows in different directions, an outline effect is created around the text.

Syntax

text-shadow: offset-x offset-y blur-radius color;

HTML

<h1 style="text-shadow: -1px -1px 0 #000, 1px -1px 0 #000,
          -1px 1px 0 #000, 1px 1px 0 #000; color: white;">
  	This is an Outlined Text
</h1>

Output

using-text-shadow-property — using text-shadow property

An outline can also be added around the text using the -webkit-text-stroke Property.

2. Using -webkit-text-stroke Property

The -webkit-text-stroke property directly applies a stroke around the text. It is simpler and more efficient than text-shadow but only works in WebKit-based browsers like Chrome and Safari.

Syntax

-webkit-text-stroke: width color;

HTML

<h1 style="color: white; -webkit-text-stroke: 2px black;">
  	This is an Outlined Text
</h1>

Output

Using--webkit-text-stroke-Property- — Using -webkit-text-stroke Property

How to replace text with CSS?

R

rr346572

Improve

Article Tags :

Similar Reads

How To Add Text Outline With CSS?

Since CSS does not provide a direct text-outline property, the CSS text-shadow property is used to create an outline effect around text by adding multiple shadows with offsets. 1. Using text-shadow PropertyThe text-shadow property is commonly used to add shadows to text, by applying multiple shadows

How to replace text with CSS?

Replacing text on a webpage is typically done on the server side, but there are situations where you might need to do this directly in CSS. This can be useful when you donâ€™t have server access or are working within certain restrictions. CSS offers a couple of methods to replace text, which we'll exp

How to add a rounded border with CSS ?

A rounded border in CSS gives elements smooth, curved corners instead of sharp ones. It enhances design aesthetics and is achieved using the border-radius property. This allows developers to control the curvature, creating visually appealing and modern web layouts easily. Using the border-radius pro

How to add color in HTML without CSS ?

In HTML, adding color to text and elements is typically done using CSS. However, there are several approaches to add color directly in HTML, without using CSS. We will discuss the following approaches to add color without CSS in HTML Elements. Table of Content Using Font TagUsing JavaScriptUsing SVG

How to set inner text shadow with CSS ?

CSS is a style sheet language that describes the document's presentation written with HTML or similar markup languages. In this tutorial, we are going to learn how to set inner text shadows with CSS. Approach: Text shadow is used to design the text elements such as paragraphs, headings, etc. We firs

How to Set Border Opacity with CSS ?

Border opacity in CSS controls the transparency of an elementâ€™s border. While there's no direct property for border opacity, you can achieve it by using color functions like rgba() or hsla(), which allow you to specify the opacity of the border color. Syntaxborderborder: 1px solid rgba(255, 0, 0, 0.

How to style outline buttons using CSS ?

This article will explore how to style outline buttons using CSS. The Outline buttons give a clean visual appearance. The clear and visible border ensures the clear separation from the background and other elements and enhances readability. We can achieve the outline buttons effect in two different

How to add shadow to text using CSS ?

The text-shadow property is used to add shadow to the text. The text-shadow property creates text shadows, specifying horizontal/vertical offsets, blur radius, and color for depth and emphasis. Note: We can customize text shadow by changing position, blur, and color for improved appearance and visua

How to Add a Gradient Overlay to Text with CSS?

Adding a gradient overlay to text can create visually appealing effects that enhance the design of a website. CSS provides various techniques to apply gradients to text. Table of Content Approach 1: Using background-clipApproach 2: Using a MaskApproach 3: Using SVGGradient Overlay to Text using back

How to Create Circle with Text in Tailwind CSS ?

To create a circle with text inside using Tailwind CSS, a utility-first framework that simplifies styling. Using Tailwind's predefined classes, you can quickly design circular elements, center the text inside, and customize the appearance all without writing custom CSS. Table of Content Circle with