Search Knowledge Base by Keyword

Add Shadow Effect

You are here:
< Back
  1. Add Glow effect to your arrow!
  2. Add Shadow Effect to your arrow!
  3. Add a Trailing Shadow arrow!

 

Add Glow Effect to your Arrow!


To add a Glow Effect to your arrow simply go to your child theme and copy and paste this code into your css file. Once you have it working you can play around with the color values to get a different colored glow.

Screenshot_042816_082504_PM


Here is the code:

.echo-content-down-arrow {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #49ff18, 0 0 30px #49ff18, 0 0 40px #49ff18, 0 0 55px #49ff18, 0 0 75px #49ff18 !important;
color: #fff !important;
}

Add Shadow Effect to your Arrow!


To add a Shadow Effect to your arrow simply go to your child theme and copy and paste this code into your css file. Once you have it working you can play around with the number values to get a different shade effect.

Screenshot_042816_082233_PM


Here is the code:
.echo-content-down-arrow {
text-shadow: -1px 5px 8px rgba(150, 150, 150, 1);
}


Add a Trailing Shadow arrow!


To add a Shadow Arrow to your arrow simply go to your child theme and copy and paste this code into your css file. Once you have it working you can play around with the number values to get a different effect.

Screenshot_042816_081938_PM


Here is the code:
.echo-content-down-arrow {
text-shadow: 0px -24px 0px rgb(77, 160, 224);
}

Table of Contents