Create a Reflection Under Text with CSS

Are you looking for romantic text effects? Let us create some new text effect using a little CSS.

In this tutorial, you will learn how to create reflection under text using CSS. You will implement neon glow, learn to center text on the screen, and create romantic typography using HTML and CSS. Finally, you will learn to use the text-shadow property for any text.

What will you learn from the tutorial?

How to center text on a webpage
How to reflection under text using CSS
How to create text shadows using CSS

The Imagination

All creativity starts with imagination. Just as artists visualize their work before creating it, a front-end developer also needs to plan and imagine each step in advance. But imagination is not enough—practice, patience, and a willingness to make changes will help you become a pro developer. I hope today’s text effect ideas inspire you to get even more creative.

The final result of the text effect is shown below. Click on the Run Code button and you will see the result.

How to reflection under text using CSS?

First, we'll create a project file and name it index.html. This is the HTML file where we'll create the structure of our page. See the demo of the HTML structure below. This structure includes document type declarations, defined <head> and <body> selections, and <meta> tags.

Add the following code to your index.html file.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Text Effect</title>
    <style>
      /*text style goes here*/
    </style>
  </head>
  <body>
    <!-- text element goes here -->
  </body>
</html>

Next, we will create an <h1> element inside the document <body>. The <h1> tag in HTML defines the top-level heading and is used to create the main title of a webpage.

Here, we have added "LOVE" text using the <h1> tag.

<h1>love</h1>

Centering text with CSS

Then we will center the LOVE text. I use the flexbox method in every tutorial to center elements. Here, we’ve used the same technique to center the text.

We changed the document body to a flex container using display: flex and set justify-content: center to center the h1 element horizontally.

The document body has no height by default, so we set a min-height: 100vh to vertically center the h1 element. This means the body will occupy the entire viewport. Then we used the align-items: center to vertically center the text.

body{
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 100vh;
   overflow: hidden;
   background: #222;
}

The document body doesn't need a scrollbar, so we'll use overflow: hidden to remove it. And finally, the body background color is set to hex code #222.

Next, we will style our text using the h1 element. We've kept the text color red to make it look romantic. Then font-size: 150px makes the text larger. CSS text-transform: uppercase is used to convert text from lowercase to uppercase. We will set the font-family: sans-serif to show bold.

h1{
    color: red;
    text-align: center;
    font-size: 150px;
    font-family: sans-serif;
    text-transform: uppercase;
    text-shadow: 0 0 20px #800000, 0 0 40px #b00000, 0 0 80px #ff0000;
    -webkit-box-reflect: below -35px linear-gradient(#00000000,#0006);
}

So far we have covered the basics of text styling. Now let's get to the main work. Many people still have trouble adding shadows to text using CSS. Let's learn about the text-shadow property so that you don't have any more problems.

Setting text shadow

The text-shadow property is used to create a text shadow in CSS. It creates text depth, glow or 3D-style. See how to construct the basic syntax of text-shadow.

text-shadow: horizontal-shadow vertical-shadow blur color;

Parameters:

horizontal-shadow: This is the X-offset, and the value must be given. The X-offset parameter specifies the horizontal distance of the shadow from the text. If you set this parameter value to positive, the shadow will move to the right from the text, and a negative value will move the shadow to the left.

vertical-shadow: This value sets the Y-offset, which controls the vertical position of the shadow. If you give a positive value, the shadow of the text will move downwards, and a negative value will move upwards.

blur: This parameter specifies the blur radius of the text shadow, which is optional to use. Keep in mind that higher values create a blurrier shadow, and lower values make it sharper.

color: Specifies the color of the text shadow. If you do not specify a color, the shadow color will usually default to the color of the current text. You can set the text shadow color using any valid CSS color method, such as rgb, hex, etc.

text-shadow: 0 0 20px #800000, 0 0 40px #b00000, 0 0 80px #ff0000;

We will add a three-layer shadow over the text:

0 0 20px #800000: Since the offset value is 0, there will be no change in the distance of the shadow. 20px specifies a blur radius, which gives a dark red glow to the text.
0 0 40px #b00000: Here too, there will be no change in the shadow distance—just a 40px blur radius gives the text a brighter red glow.
0 0 80px #ff0000: This gives the text a much brighter red glow with an 80px blur radius.

We will add text shadow in multiple steps

We increase the blur radius value (from 20px to 40px to 80px) to create a neno glow effect. This way the text shadow becomes softer as it expands.

Setting text reflection

Here we have used the CSS -webkit-box-reflect property to create text reflection. The -webkit-box-reflect property is a WebKit-only CSS extension that works in Chrome, Safari, and Edge browsers. This property can be used to simulate reflection, like those seen on water or glass.

Let us break down how it works and what parameters are used.

-webkit-box-reflect: direction offset mask;

Parameters:

direction: Specifies where the reflection will appear relative to the element. The possible values that can be used to indicate the direction of reflection are above, below, left, and right.

offset: Here you set how far the reflection will be from the original element.

mask: Here a gradient or image mask is defined that shapes the reflection. However, mask is optional.

-webkit-box-reflect: below -35px linear-gradient(#00000000, #0006);

Here we set the direction to below so that the browser places the reflection below the text. Then we set the offset to -35px, which will leave a 35px gap between the reflection and the text. Finally, we will apply a fade effect to the reflection using a gradient mask.

The hex code #00000000 is completely transparent black.
The hex code #0006 is semi-transparent black, which is about 40% opacity.

Thank you for reading the entire Reflection Under Text article. I hope you gained some insight into -webkit-box-reflect and text-shadow property. For more content like this, you can follow me on YouTube.

Happy Coding!