In this tutorial, you will learn how to apply a Glassmorphing to the widget Elementor Pro Flip Box. Let's recreate an example where we will have two Flip Boxes: one with Glassmorphing only on the front and another with Glassmorphing on both the front and the 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.
Modify the height and remove the paddings, setting them 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 spacing 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 color of the text and button 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 part, 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. Both the Front and Back now have the Glassmorphing effect.
I hope this tutorial was helpful to you! If you liked it, don't forget to like it, subscribe to the channel and activate the bell to receive notifications. If you have any questions or concerns, leave them in the comments. Until next time!
