Shadows are really a nice way to give depth and 3-D look to any text. Generally, we use text-shadow to give shadow to the text but this shadow is short and to create long shadow (shadow in which text is visible like that of reflection) we have to use before selector and skew function.
Approach: The approach is to use a skew to create tilted text first and then use before to make the original text whose shadow was created using the skew function.
HTML Code: In this section, we have our text wrapped inside a h1 tag.
CSS Code: For CSS, follow the below given steps.
- Step 1: Apply a grayish background to the body.
- Step 2: Align the text to the center and use skew function over it.
- Step 3: Change the color of the skewed text to a slightly dark version of the background color.
- Step 4: Use before selector and set the content to the attribute value of h1 tag .
- Step 5: Now use the skew function with the same angle that of the original one but with negation.
Note: Make sure the skew angle is not more than 70deg and the angle used in “h1” tag styling and before selector are the same with one being the nagative value of the other.
Complete Code: It is the combination of the above two sections of code.
- Create a Glowing text shadow using HTML and CSS
- HTML | DOM Style textShadow Property
- How to add shadow to text using CSS ?
- CSS | text-shadow Property
- How to Create a Cutout Text using HTML and CSS ?
- How to Create Liquid Filing Effect on Text using HTML and CSS ?
- How to Create Loading Blur Text Animation Effect using HTML and CSS ?
- Create a 3D Text Effect using HTML and CSS
- How to create text-reveal effect using HTML and CSS ?
- How to Create Engraved Text Effect using HTML and CSS ?
- How to create linear gradient text using HTML and CSS ?
- How to Create Text Color Animation using HTML and CSS ?
- How to Create Text Reveal Effect for Buttons using HTML and CSS ?
- Create a Gradient Text Effect using HTML and CSS
- How to Create Ghost Text Animation on Hover using HTML and CSS?
- How to create multilayered text effect using HTML and CSS?
- Text Animation with changing the color of the text using HTML & CSS
- How to style icon color, size, and shadow by using CSS ?
- How to add a box-shadow on one side of an element using CSS?
- Drop shadow for PNG image using CSS
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.