In this tutorial, you will learn how to apply a Glassmorphing to the widget of Flip Box by Elementor Pro. Let's recreate an example where we will have two Flip Boxes: one with Glassmorphing only on the front and one with Glassmorphing on both the front and back.
Preparation
Before you begin, make sure you have Elementor Pro installed on your WordPress site.
Create the Structure
Open Elementor and create the container structure you need.
Change the height and remove the padding, setting it to zero.
Add a background image to make the Glassmorphing more visible. Align the content to the center.
Customize the Flip Box
Embed the Flip Box widget.
Change the icon to an image.
Defines the height and border radius.
Customize the Front:
Set a space and image size.
Define a border for the image and choose a color (for example, white).
Change the effect to «Slide Up».
Customize the Back
Defines the background color of the Back (white in this case).
Set the text and button color to black.
Defines a border for the card, for example, a continuous one-pixel border in white.
Apply Glassmorphing
To apply the Glassmorphing effect to the Front and Back of the Flip Box, follow these steps:
-In the Front part, remove the background color and set the opacity to zero.
-In the Back section, remove the background color and apply the CSS code in Advanced > Custom CSS:
Result
Refresh your page and you will be able to see the Glassmorphing effect applied to the Flip Box. Now both the Front and Back have the Glassmorphing effect.
I hope you found this tutorial useful! If you liked it, don't forget to give it a thumbs up, subscribe to the channel and activate the bell to receive notifications. If you have any questions or doubts, leave them in the comments. See you next time!
