Custom codes with Elementor

All the codes discussed in this video will be listed below. You may copy and paste them into your Elementor Custom Code section to achieve the same effects. I hope they work for you and make designing your website even easier!

Gradient text

css class: gradient-text

Create a beautiful text with a gradient running through it. This effect is great for modern websites, especially those in the cutting edge tech industry! If you would like to adjust the colors of the gradient you can replace any of the hex codes in this snippet of code (a hex code is a code that refers to a specific color, here’s an example: #d16ba5).The list of hex codes refer to the steps in the gradient (for example: light blue fades to blue, which fades to purple, which fades to red etc). If you plan on replacing them with your own, you will need to replace these steps.

Important: In order for this effect to work properly, you will need to turn down the opacity of the color of your text. Edit your text element > Style > Text Color > Drag the opacity slider all the way down to 0.

				
					<style>
    .gradient-text .elementor-heading-title { 
        background-image: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1); 
        background-clip: text;
        -webkit-background-clip: text; 
}
	.gradient-text .elementor-text-editor { 
	    background-image: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1); 
	    background-clip: text;
	    -webkit-background-clip: text; 
}
	</style>
				
			

Black & White

css class: bw

I made this effect with speed in mind. Sometimes I don’t have time to go into a photo editor and create a black and white copy of an image. With this effect you can quickly add a black and white filter by typing in just 2 letters!

				
					<style>
	.bw {
	    -webkit-filter: grayscale(100%) !important;
        filter: grayscale(100%) !important;
	}

</style>
				
			

Polaroid

css class: polaroid

css class: polaroid-text

How about adding a cool polaroid effect to your images? This gives some character to your site and can bring some sense of design with very little work! After you apply the css class to the image element you can easily adjust details on the image element such as border radius to round the edges of the polaroid. If the size of the white polaroid border is not fitting well with a certain image you can always add a “solid” border to the image element and then make more specific adjustments there.

Important: If you plan on adding a “caption” to the polaroid use a Heading element and set the css class to “polaroid-text” this will incorporate the same 2 degree rotation that the image has. Once you’ve set the css class, simply use margin adjustments in Elementor to position the caption on top of the polaroid.

				
					<style>
	.polaroid img{
        object-fit: cover;
        object-position: center center;
        margin: 15px;
        border-top: 1vw solid #ffffff;
        border-left: 1vw solid #ffffff;
        border-right: 1vw solid #ffffff;
        border-bottom: 5vw solid #ffffff;
        -webkit-transform: rotate(2deg);
        -moz-transform: rotate(2deg);
        -ms-transform: rotate(2deg);
        -o-transform: rotate(2deg);
        transform: rotate(2deg);
        box-shadow: 10px 10px 20px #AAAAAA;
        -webkit-backface-visibility: hidden;
	}
	.polaroid-text {
        -webkit-transform: rotate(2deg);
        -moz-transform: rotate(2deg);
        -ms-transform: rotate(2deg);
        -o-transform: rotate(2deg);
        transform: rotate(2deg);
}
	@media only screen and (max-width: 600px) {
  .polaroid img{
        margin: 15px;
        border-top: 5vw solid #ffffff;
        border-left: 5vw solid #ffffff;
        border-right: 5vw solid #ffffff;
        border-bottom: 20vw solid #ffffff;
  }
}
</style>
				
			

Button Glow

css class: button-glow

If you are running a dark themed website, this desktop visual effect is for you! Create some “out of the box” glow to your buttons when you implement this effect. On hover your button will start to glow, outside of the bounds of the button. Please be aware this is only for devices that can simulate hovering (such as desktop, not mobile). Think Neon from now on!

Important: You must update the hex codes on line 5 and 8 to be the same color you intend to make your button. 

				
					<style>
.button-glow .elementor-button{
  transition: all .6s;
	border-radius: 35px;
	border: 3px solid #31968E;
}
.button-glow a:hover{
    box-shadow: 0 0 50px 10px #31968E;
}
</style>
				
			

Text Glow

css class: text-glow

This visual effect makes text pop off the page! Use it with a light colored background to make an artistic tracing of text or use it with a dark colored background to get a neon look! You can use this for the following Elementor widgets: headline, text editor or animated headline (use style: rotating and animation: typing to apply this effect to an animated headline).

Important: In order to change the color of the glow, replace all instances of #E12DDF in the code below with the color code you would like to use. Remember these color codes are 3 or 6 characters and must begin with a pound sign (#).

				
					<style>
.text-glow .elementor-heading-title{
  color: #fff;
  text-shadow:
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px #fff,
    0 0 40px #E12DDF,
    0 0 80px #E12DDF,
    0 0 90px #E12DDF,
    0 0 100px #E12DDF,
    0 0 150px #E12DDF;
}
	
	.text-glow .elementor-text-editor{
  color: #fff;
  text-shadow:
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px #fff,
    0 0 40px #E12DDF,
    0 0 80px #E12DDF,
    0 0 90px #E12DDF,
    0 0 100px #E12DDF,
    0 0 150px #E12DDF;
		
}
	
		.text-glow .elementor-headline-dynamic-letter{
  color: #fff;
  text-shadow:
    0 0 5px #fff,
    0 0 10px #E12DDF,
    0 0 15px #E12DDF,
    0 0 20px #E12DDF;
		
}
	.text-glow .elementor-headline-animation-type-typing{
  padding-top: 20px;
	padding-bottom: 20px;
	padding-right: 10px;
	padding-left: 10px;
		
}
	.text-glow .elementor-headline-dynamic-wrapper{
	padding-right: 5px;
	padding-left: 5px;
		
}
	
	
	.text-glow .elementor-headline-plain-text{
  padding-top: 20px;
	padding-bottom: 20px;
	padding-right: 0px;
	padding-left: 0px;
		
}
	
</style>

				
			

Combining Effects

It is possible to combine these effects together to make some amazing custom styles! To do this simply give the element two CSS classes with a space in between. For example: If I wanted to make a caption for my polaroid, out of gradient text I would write in the Heading Elements CSS Class “polaroid-text gradient-text” which would create a tilted (polaroid-text effect) gradient effect!

(Video should start at 12:39)

NEW EFFECTS

Effect Not working?

Check out this YouTube playlist for tutorial videos on alternative ways to achieve some of these same effects. If all else fails Elementor Pro users have access to the Elementor Support Team, which may be able to help!