Casey Whitcher Profile
Casey Whitcher
Show Some Love, Share!
Share on facebook
Share on twitter
Share on linkedin

Post Contents

How To Reflect Titles, And Improve Your Elementor Skills!

Reflected Title
CSS
Casey Whitcher Profile
By
Casey Whitcher
Show Some Love, Share!
Share on facebook
Share on twitter
Share on linkedin

Post Contents

Simple Reflection Effect

This effect can add an extra touch of class to your titles. 

The key here is to use this sparingly and in the right situations. 

The steps for this are pretty quick and dirty and can be applied easily with a simple style. 

Adding a class to our title

add class to elementor title

The first thing we will need to do is add a custom class to our title, or any element for that matter. 

In this case, I’m going to name my class name kcs-mirror  (I’m KC by the way).

You can always name your class whatever you like.

Setting Up Our CSS

Custom Elementor CSS

Now, we want to add the reflect CSS to our style sheet. 

I like to keep all of my custom CSS inside the global styles Extra CSS area.  

Hamburger Menu  > Site Settings > Custom CSS

We will add the following:

.kcs-mirror{
-webkit-box-reflect: below -13px linear-gradient(to bottom, transparent, rgba(255,255,255,0.6));
}

Let’s break down what’s happening here.

The heavy lifting is done by the -webkit-box-reflect property.

The first part of our CSS is our selector. Our selector for this CSS is .kcs-mirror which tells the CSS to apply this effect to any element with the class kcs-mirror.

The next section is the -webkit-box-reflect property.

The final part is where all the magic happens, the property value, and in this situation, this value has a lot of parts to it.

We will talk about that next.

ADJUST OUR CSS

TITLE WITH NO OFFSET OR GRADIENT

With the most basic reflection all we are adding is: 
-webkit-box-reflect:below;

You can try this with any of your titles, but just typing in the titles custom CSS:

Selector{
-webkit-box-reflect:below;
}

TITLE WITH OFFSET, BUT NO GRADIENT

Now we are going to add our offset. This will be different for most of your titles depending on their line-height or extra spacing: 

-webkit-box-reflect:below -15px;

Keep in mind, the number of pixels you offset it will vary depending on the size of your font, and the line-height, just play with it until it’s where you want. 

TITLE WITH GRADIENT, BUT NO OPACITY

Now we are going to add our gradient to give it that fade effect. 

In this example, I chose “black”. That could just as easily be white, or pink, or #ed308f. 

The color is actually not relevant, it is used as a placeholder for the transparency value. 

-webkit-box-reflect:below -7px linear-gradient(to bottom, transparent, black);

THE FINAL TITLE WITH ALL EFFECTS

Finally, as we discussed the color we use is irrelevant. This means that we can also set an opacity value for this color. 

In this example, we switched from “black” to the RGB value of black, which allowed us to add opacity to it. 

 -webkit-box-reflect:below -7px linear-gradient(to bottom, transparent, rgb(0,0,0,.4));

THINGS TO 
CONSIDER
REMEMBER

Since we can apply this effect to any element, we can easily combine this with animated Titles. 

This animation example is from CrocoBlocks widgets. 

One thing to watch out for is the spacing. 

For these titles, I’m going to need some extra space under them.  

If I was to add margin or padding to the title itself, I’m increasing the element’s height. 

That means that when I add my gradient it will consider the full height. 

That will cause the gradient to look like a solid color. 

In order to add the spacing your reflection needs, add a spacer, or add top-padding to the element underneath it. 

Final Thoughts

Do you have a better way to pull this off? 

Have you run into problems with this that I forgot to cover? 

I actually am not a huge fan of this effect, have you added it to a design you’d like to show off and think it works well?

Let me know in the comments!

Leave a Reply

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

Related Articles

Technical

GTM + WooCommerce + Facebook Pixel!

Crocoblock

The Big List Of Crocoblock Widgets

Crocoblock

See All JetTricks By Crocoblock On One Page

CSS

Flexbox Tricks Are An Elementor Game Changer

RELATED
Technical

GTM + WooCommerce + Facebook Pixel!

Crocoblock

The Big List Of Crocoblock Widgets

Crocoblock

See All JetTricks By Crocoblock On One Page