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.