How to Use the Animated Star Background in Elementor

Adding this animated star background to your Elementor website is simple. Follow these steps to create a modern glassmorphism card with smooth twinkling star animations.

Step 1: Add a Container or Icon Box

Open your page with Elementor and add a Container, Icon Box, or any widget you want to display with the animated background.

Step 2: Assign the CSS Class

Select the widget or container, then navigate to:

Advanced → CSS Classes

Enter the following class name:

icon-list

This class connects your element with the custom CSS animation.

Step 3: Add the CSS

Copy the complete CSS code and paste it into one of the following locations:

• Elementor Pro: Site Settings → Custom CSS
• WordPress: Appearance → Customize → Additional CSS
• Using a Plugin: Install a custom CSS plugin such as Simple Custom CSS & JS and paste the code there.

Step 4: Save Your Changes

Click Publish or Update to save your changes.

Step 5: Refresh the Page

Reload your website to see the animated background in action.

What You’ll Get

Once the CSS is applied, your element will feature:

• Elegant glassmorphism background
• Smooth animated twinkling stars
• Soft glowing light effects
• Rounded modern card design
• Responsive layout for desktop, tablet, and mobile
• Subtle hover animation for a premium user experience

Tips for Best Results

• Use a dark background so the stars are clearly visible.
• Add 20–30px of padding inside the container for balanced spacing.
• Keep the card border radius between 20px and 30px for a modern look.
• Pair the effect with SVG icons and clean typography for a polished design.
• Avoid placing too many animated cards on the same page to maintain excellent performance.

Following these steps allows you to create eye-catching service cards, feature sections, pricing boxes, or portfolio items with a professional animated background using Elementor.