Getting Creative with CSS – Text Shadows

I always loved CSS and really like playing with it. I am currenly working on a food project and was thinking about adding a little twist in the titles with some cool text-effects.
I wanted to use the main title font in a creative way and allowed myself some time to play with the text-shadow property.

In this post you will see some ideas about how to use text-shadows creatively. In future, I will aim to add additional ways of styling text. If you have an idea, feel free to contact me.

Meanwhile, have a look and let me know if you like them.

Long Drop Shadow


This first effect is actually rather popular. It is the long flat shadow that usually is used on icons and illustrations. To create such shadow you will need to play with text-shadow property a lot. I am working with the main titles to create the effects but you can use whatever you want. In order to give the text a better look I have put “color: transparent”. If you put color you will see there are some issues with the rendering of the letters. For the text-shadow, I have created an array of shadow values starting with darker gray shade and ending the background colour. The letter-spacing property is added and set to 20px in order to achieve better readability.
Here is the CSS:

#effect1 h2 {
font-size:100px;
padding:20px 0 80px;
font-weight:bold;
color: transparent;
letter-spacing: 20px;
text-shadow:1px -1px 0 #c26e90, 1px 1px 1px #737272, 2px 2px 1px #767474, 3px 3px 1px #787777, 4px 4px 1px #7b7a7a, 5px 5px 1px #7f7d7d, 6px 6px 1px #828181, 7px 7px 1px #868585, 8px 8px 1px #8b8a89, 9px 9px 1px #8f8e8d, 10px 10px 1px #949392, 11px 11px 1px #999897, 12px 12px 1px #9e9c9c, 13px 13px 1px #a3a1a1, 14px 14px 1px #a8a6a6, 15px 15px 1px #adabab, 16px 16px 1px #b2b1b0, 17px 17px 1px #b7b6b5, 18px 18px 1px #bcbbba, 19px 19px 1px #c1bfbf, 20px 20px 1px #c6c4c4, 21px 21px 1px #cbc9c8, 22px 22px 1px #cfcdcd, 23px 23px 1px #d4d2d1, 24px 24px 1px #d8d6d5, 25px 25px 1px #dbdad9, 26px 26px 1px #dfdddc, 27px 27px 1px #e2e0df, 28px 28px 1px #f1f1f1;
 }

Preview:

See the Pen A nifty collection of CSS text effects – Long Drop Shadow by Petia (@designify-me) on CodePen.

Related post:  pagePiling.js - Create a scrolling pile of sections

Adding colour


With this effect I wanted to create a color effect with a bit of transparency and mixture of colours. Again I am putting “color: transparent” so only the text-shadow colours are visible and they create this overlaying colour effect. For the text-shadow I have an array of three values for the text-shadow which determine the colour and the position of the shadow. To do that, see the CSS code below.

#effect2 h2 { 
font-size:130px; 
font-weight:bold; 
padding:40px 0 80px; 
color:transparent; 
letter-spacing:10px; 
text-shadow: 0.45rem -0.45rem rgba(221, 176, 196, 0.75), 
-0.45rem -0.45rem rgba(125, 167, 217, 0.75), 
0 0.4rem rgba(220, 209, 164, 0.75); 
}

Preview:

See the Pen A nifty collection of CSS text effects – With a little colour by Petia (@designify-me) on CodePen.

Outlined Text Shadow


After creating the colour effect, I thought it might be nice to create a text shadow effect that will make the text to look like it is outlined artistically with different strokes. To achive this, I am resuing the colour code above but adding color:#333; which is the same as the background of the section. It is important that the text colour and the background for the container are the same in order to achieve the outlined look.

#effect3 h2 {
	font-size:130px;
	font-weight:bold;
	font-family: 'Playfair Display', serif;
	letter-spacing: 20px;
	padding:40px 0 80px;
	color:#333;
	text-shadow:  0.45rem -0.45rem rgba(178, 217, 35, 0.75), -0.45rem -0.45rem rgba(39, 172, 227, 0.75), 0 0.5rem rgba(255, 213, 25, 0.75);
}

Preview:

See the Pen A nifty collection of CSS text effects – Outlined text shadows by Petia (@designify-me) on CodePen.

A little bright handwriting


For this effect I am using bright colours and a handwriting font. I wanted to achieve a classic vintage look with beautiful colours. For the text-shadow property I am having two values, the first one is the strong orange and the second one is a lighter version of it.

#effect4 h2 {
	font-size:150px;
	font-weight:bold;
	font-family: 'Great Vibes', cursive;
	padding:40px 0 80px;
	color: #fcc105;
	letter-spacing: 12px;
	text-shadow:  4px 4px 0px #ff981d, 7px 7px 0px rgba(200, 120, 22, 0.2);
}

Preview:

See the Pen A nifty collection of CSS text effects by Petia (@designify-me) on CodePen.

Related post:  FontFlex - Change font sizes dynamically

Retro Text Shadow Effect


I wanted to create an effect that will make the text look a bit retro and graphically strong. I am using Josefin Sans Font and for the text-shadow I have two values, the first one gives the separation of the text with the gray line shadow below. The background is set to white as well as the first value. You can use other colour if you want. But you won’t have the nice separation between the text and the shadow if the colours of the background and the text are different. Look at the CSS and the preview below:

#effect5 h2 {
	font-size:130px;
	font-weight:bold;
	font-family: 'Josefin Sans', sans-serif;
	padding:40px 0 80px;
	color: #353535;
	letter-spacing:10px;
	text-shadow: 
 4px 4px 0px #fff, 6px 6px 0px rgba(54, 54, 54, 0.5);
}

Preview:

See the Pen A nifty collection of CSS text effects – Retro Text Shadow by Petia (@designify-me) on CodePen.

Neat Cutout Text Shadow


This effect aims to look like the letters have been cut out from the canvas. I am creating this one by adding five values for the text-shadow property. The values are the same colour but with different opacity. Again the colour of the text and the background should be the same colour in order to achive the cutout effect.

#effect6 h2 {
	font-size:130px;
	font-weight:bold;
	padding:40px 0 80px;
	color: #f1f1f1;
	letter-spacing: 4px;
	text-shadow: 
 3px 0px 0px rgba(54, 54, 54, 0.9), 
 6px 0px 0px rgba(54, 54, 54, 0.7), 
 9px 0px 0px rgba(54, 54, 54, 0.5), 
 12px 0px 0px rgba(54, 54, 54, 0.3), 
 15px 0px 0px rgba(54, 54, 54, 0.1);
}

Preview:

See the Pen A nifty collection of CSS text effects – Cutour Effect by Petia (@designify-me) on CodePen.


All effects in one pen.

That’s it! These are my CSS text snippets for today. I hope you like them and they will be useful for your projects. Share them with your friends.

Divi WordPress Theme

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close