Create Multi-colored Text Outline using CSS

This is a quick tutorial showing how to make the beautiful multi-colored outline shown in the following demo using CSS.

See the Pen Text Shadow Example by Aakhya Singh (@aakhya) on CodePen.

The Structure

The text to be outlined is written in a p tag.

HTML

<p>Outlined</p>

The Styling

We'll use the CSS text-shadow property to create the outline. Since the outline will consist of four colors, we will be using four text shadows of different colors.

Note: Give the blur radius value as 0 to the text-shadow property to give the look of an outline to the text shadows. (Giving a positive blur radius will yield an elegant colorful text shadow)

The first shadow is a bottom-left shadow created by giving a negative horizontal offset and a positive vertical offset to the text-shadow property.

CSS

p {
  text-shadow: -1px 1px 0 #41ba45;
}

The text with only this shadow looks like as shown below.

See the Pen Making outline by Aakhya Singh (@aakhya) on CodePen.

The second shadow is a bottom-right shadow created by giving both the horizontal offset and the vertical offset positive.

CSS

p {
  text-shadow: 1px 1px 0 #c63d2b;
}

On giving only this shadow, the text looks as shown below.

See the Pen Making outline by Aakhya Singh (@aakhya) on CodePen.

The third lovely blue colored shadow is a top-right shadow created by giving a positive horizontal offset and a negative vertical offset.

CSS

p {
  text-shadow: 1px -1px 0 #42afac;
}

This shadow makes the text look as shown in the following demo.

See the Pen Making outline by Aakhya Singh (@aakhya) on CodePen.

The last shadow is a yellow colored top-left shadow created by giving both the horizontal offset and the vertical offset negative.

CSS

p {
  text-shadow: -1px -1px 0 #c6c23f;
}

The text looks beautiful with solely this yellow shadow.

See the Pen Making outline by Aakhya Singh (@aakhya) on CodePen.

Summing Up

These four shadows combined results in a bold and dazzling colorful outline. Here's the entire CSS code.

CSS

/* Google Font */
@import url('https://fonts.googleapis.com/css?family=Ubuntu');

body {
  background-color: #121212;
}

p {
  margin: 40px auto;
  font-family: 'Ubuntu', sans-serif;
  font-size: 70px;
  font-weight: bold;
  color: #121212;
  text-align: center;
  letter-spacing: 5px;
  text-shadow: -1px 1px 0 #41ba45,
		       1px 1px 0 #c63d2b,
		       1px -1px 0 #42afac,
		        -1px -1px 0 #c6c23f;
}