September 29, 2023

Combine Image Editing With Custom CSS AI Using Elementor

Play Video

With Elementor’s AI feature, you can effortlessly remove image backgrounds and generate custom CSS animations. This tutorial will walk you through the process of combining image editing with custom CSS AI using Elementor.


Before we begin, make sure you have the following:

Step 1: Drag an Image Widget

  1. Open your Elementor editor.
  2. Drag an Image Widget onto your canvas.

Step 2: Use AI to Remove Image Background

  1. Click on the image widget to open its settings.
  2. Navigate to the AI Image Editor.
  3. Use the editor to remove the image background.

Step 3: Add Custom CSS for Animation

  1. Go to the Advanced Tab.
  2. Expand Custom CSS.
  3. Click the AI icon to activate the AI Editor.
  4. Type the animation you’d like to see, for example, “float continuously.”
  5. Insert the code provided by the AI Editor.

Step 4: Fine-Tune the Animation

  1. Increase the distance of the animation.
  2. Decrease the duration to make the movement more noticeable.

Step 5: Add a Dynamic Shadow

  1. Drag a Spacer Widget below the image.
  2. Set its height to 0 pixels.
  3. Go to Advanced Tab and set its width to custom (e.g., 5%).
  4. Expand Border and set a 100% border radius.
  5. Activate Box Shadow, select the color, maximize the blur, and increase the spread.

Step 6: Animate the Shadow

  1. Use the Transform Skew Controls to give the shadow perspective.
  2. Go to Custom CSS and activate the AI Editor.
  3. Write a new prompt for shadow animation.
  4. Match the animation duration with the object.

Elementor CSS AI – Conclusion

Combining Elementor’s AI capabilities with its existing features opens up a world of possibilities for web design. By following these steps, you can create dynamic, AI-powered elements that bring your designs to life.

Required Resources

Elementor Logo
Free Options
Credit to Elementor
Elementor's YouTube channel is a rich source of practical knowledge for web creators. It offers tutorials, feature introductions, and expert advice.
Combine Image Editing With Custom CSS AI Using Elementor
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.