Silica Documentation
Learn how to use Silica, the liquid glass WordPress plugin for Elementor. Step‑by‑step setup, free vs pro features, browser support, best practices, performance tips, and troubleshooting.
Introduction
What Is Silica?
Silica is a WordPress plugin for Elementor that adds glassmorphism and liquid glass effects to containers, cards, and sections. It provides one‑click frosted glass styling in the free version, and advanced lighting, distortion, and cursor‑responsive liquid glass effects in Silica Pro.
Who is Silica For?
- Web Designers creating modern, visually appealing websites
- Elementor Users who want to enhance their designs
- Freelancers looking to stand out with unique design effects
Why use Silica instead of custom CSS?
Silica saves significant development time compared to custom CSS glassmorphism. Its dynamic lighting system keeps edge highlights visually consistent across any element size or aspect ratio, so buttons, cards, and full‑width sections all share the same perceived light angle without manual tweaking.
Why use Silica Pro instead of custom JS?
Silica Pro lets you ship complex, interactive glassmorphism and liquid glass effects that would normally require custom JavaScript logic, event listeners, and performance optimizations. All of that is wrapped into simple Elementor controls and toggles, transforming months of technical development into seconds of implementation while ensuring every element fits perfectly regardless of size or shape.
Attention to detail. The liquid glass effect requires advanced mathematical calculations and rendering techniques that adapt dynamically to each element’s dimensions, border-radius, and shape.
Adaptability. The plugin continuously monitors every container and automatically recalculates complex gradient patterns, distortion scales, and blur values in real time – small buttons get an intensified effect while larger sections receive proportionally adjusted rendering.
How to Install Silica
Requirements
WordPress: 6.5 or higher
PHP: 7.4 or higher
Elementor: Required
Browser: Chromium-based browser recommended for Pro features
Installing Silica
From WordPress Dashboard:
- In your sidebar, navigate to Plugins → Add New
- Search for “Silica”
- Click Install Now, then Activate
- Navigate to the new Silica Dashboard in your sidebar to confirm everything is running smoothly.
- You may optionally Connect your account. This is required only for activating your free trial or purchasing a license; it is not a marketing opt-in.
How to Start Your Silica Pro Free Trial
Starting Silica Pro Trial
Ready to take Silica Pro for a spin? No credit card is required to start. Just follow these steps:
- Launch the Trial Setup
- Make sure you have Silica installed. Go to installation instructions
- Click any Start Free Trial link or button within the Silica dashboard.
- You can find these in the top notification bar, the “Quick Links” section, or the sidebar menu.
- Select Your Plan
- You will be directed to a secure page to choose your preferred Pro plan.
- Click on “START MY FREE 7 DAYS” on your preferred plan.
- Note: It will take a few seconds to load and activate.
- Download Silica Pro
- Once confirmed, you will see a success message (and receive a confirmation email) with a download link.
- Click Download the latest Silica Pro version to save the .zip file to your computer.
- Install & Activate
- Install the Pro version just like the standard version:
- Navigate to Plugins → Add New → Upload Plugin.
- Choose the Silica Pro .zip file you just downloaded.
- Click Install Now, then Activate.
And you’re done! You now have full access to all premium features for the duration of your trial.
Purchasing Silica Pro
Purchasing Silica Pro (for life)
Unlock the full power of Silica by upgrading to a Pro lifetime license. The entire process takes less than two minutes and happens right inside your dashboard.
- Open the Upgrade Menu
- In your WordPress sidebar, navigate to Silica → Upgrade.
- Alternatively, navigate to Silica → Account. At the top you will see an Upgrade tab.
- This will display the available Pro plans. Since this is a lifetime license, you only ever pay once.
- Choose Your Plan
- Click the Upgrade Now button on your preferred plan.
- A secure checkout overlay will appear instantly – no need to leave your site.
- Secure Checkout
- Enter Details: Fill in your email and payment information (Credit Card or PayPal).
- Confirm: Once the payment is processed, Freemius will automatically generate your license key and prepare your Pro download.
- Automatic Activation
- In most cases, Silica Pro will automatically activate the license on your site immediately after purchase. If prompted, simply click Activate License to finalize the setup.
Note: You will also receive a confirmation email from Freemius containing your license key and a direct download link for your records.
Prorated Lifetime Upgrades
If you start with a 1-site license and later decide you need more, you can upgrade at any time. Because your license is “for life,” you simply pay the difference between the two plans to expand your site limit. There is no time limit on when you can perform this upgrade.
7-Day Money-Back Guarantee
We want you to be 100% confident in your investment. If Silica isn’t the right fit, let us know within 7 days of your purchase for a full refund, no questions asked.
- Check the Timeline
- Ensure your request is made within 7 days of your original purchase.
- Contact Support
- The fastest way to initiate a refund, is to use the contact form within your Silica dashboard.
- Go to Silica → Contact Us
- Fill in the form.
- Processing
- Once we receive your request, we will process the refund through Freemius immediately.
Note: Upon refund, your Pro license will be deactivated, and your site will automatically revert to the free version of Silica.
Redeeming a License or Coupon Code
If you’ve received a license key or coupon code for Silica Pro, you can redeem it directly inside your WordPress dashboard.
To redeem a coupon code (discount at checkout)
- In your WordPress sidebar, go to Silica → Upgrade (or Silica → Account → Upgrade).
- Choose your preferred Pro plan and click Upgrade Now.
- In the secure checkout overlay, enter your coupon code in the designated field.
- Click Apply to update the price, then complete your purchase as normal.
To activate a license key (after purchase or manual grant)
- In your WordPress sidebar, go to Silica → Account.
- If prompted, click Activate License.
- Paste your license key into the field and click Activate.
- Once activated, Silica Pro features will unlock automatically on your site.
If you have trouble redeeming your code or your license won’t activate, please contact us via Silica → Contact Us → Billing Issue or Technical Support.
Getting Started
Your First Glass Effect
- Open Elementor
- Edit any page with Elementor or create a new one
- Add a Container
- Add a new Container or select an existing one
- Tip: Blank containers work perfectly for showcasing glass effects
- Enable Silica Glass
- Select your container
- Go to the Style tab in the left panel
- Scroll down to find the Silica Glass section
- Toggle the Enable switch to ON
- Enable Liquid Glass
- Select your container
- Go to the Style tab in the left panel
- Scroll down to find the Liquid section in the Silica controls
- Toggle the Enable switch to ON
- Style Your Glass
- Background Color: Add transparency for glass effect.
- Border Radius: Round corners for modern look.
- Padding: Add internal spacing.
- Preview
- Click Preview or Update to see your glass effect in action
Congratulations! You’ve created your first glass effect!
Features Overview
Silica Free is ideal for simple frosted glass cards and panels. Silica Pro is designed for advanced, interactive glassmorphism and liquid glass effects with custom lighting angles, depth, clarity controls, and cursor-responsive animations.
| Feature | Free | Pro |
|---|---|---|
| One-Click Glassmorphism | ✅ | ✅ |
| -45° Liquid Glass Default Border Lighting | ✅ | ✅ |
| Native Elementor Styling | ✅ | ✅ |
| Works on All Elementor Containers | ✅ | ✅ |
| Customizable Light Angle | ❌ | ✅ |
| Light Intensity Control | ❌ | ✅ |
| Border Thickness Control | ❌ | ✅ |
| Frost Blur Control | ❌ | ✅ |
| Depth Effect | ❌ | ✅ |
| Clarity & Brilliance Controls | ❌ | ✅ |
| Dynamic Lighting (Cursor Response) | ❌ | ✅ |
| Fluidity Animations | ❌ | ✅ |
| Custom Cursor Effects | ❌ | ✅ |
| Advanced Liquid Glass Effect | ❌ | ✅ |
Free Version Features
Silica Free focuses on simple, static frosted glass cards and panels that work out of the box.
What You Get
- One-Click Glassmorphism: Automatic frosted glass effect when enabled.
- Border Lighting: Subtle -45° edge lighting that adapts to any container size.
- Elementor Integration: Works seamlessly with all native Elementor styling options.
Limitations
- Fixed -45° light angle (not customizable).
- No advanced liquid glass distortion effects.
- No dynamic lighting or animations.
- No advanced effect customization.
Pro Version Features
Silica Pro unlocks the full potential of liquid glass effects with advanced customization and interactive features.
Light Controls
- Angle: Controls the direction of the edge lighting effect (-179° to 180°).
- Intensity: Adjusts the brightness of the edge lighting (0% to 100%).
- Border: Controls the thickness of the lighting border (0px to 3px).
- Hide Editor Outline: Hides Elementor’s grey outline in the editor so you can see your borders clearly while editing.
Liquid Glass Controls
Note: The liquid glass refraction effect uses advanced features that work best in Chromium-based desktop browsers. Frost, Depth, Clarity, Brilliance and all other effects are widely supported.
- Enable Liquid: Activates the advanced liquid glass distortion effect for realistic refraction.
- Frost: Controls the blur intensity of the frosted glass effect (1px to 10px).
- Depth: Adds inner shadows to create a 3D pressed-glass effect (0px to 10px).
- Clarity: Adjusts the clarity of the glass effect (0.8 for “milky”, to 1.2 for clear and “contrasty”).
- Brilliance: Controls the brightness/luminosity of the colours below the glass surface (1.0 to 1.5).
Other Effects (Interactive)
- Dynamic Lighting: The glass lighting responds to cursor movement in real-time.
- Fluidity: Adds smooth, flowing animations and subtle morphing to the glass effect.
- Hide Cursor: Hides the cursor when hovering over the element (front-end only) for an immersive experience. Works best with a light, hover colour added for iPad OS like cursor effect.
Which Browsers Supports Silica’s Liquid Glass Effect?
Silica’s advanced liquid glass distortion effect currently works best in Chromium-based browsers like Chrome, Edge, Opera, Arc and more. On Safari and Firefox, all other effects still work, but liquid refraction is limited.
Fully Supported (All Features)
Chromium-Based Desktop Browsers: Google Chrome (v90+), Microsoft Edge (v90+), Brave, Opera, Arc, Vivaldi, etc.
Partial Support
- Firefox: Basic glass effects work; liquid glass may not render.
- Safari (macOS/iOS): Basic glass effects work; liquid glass is limited (shocker)
| Feature | Chromium | Firefox | Safari |
|---|---|---|---|
| Frost/Blur | ✅ | ✅ | ✅ |
| Liquid Glass Distortion | ✅ | ❌ | ❌ |
| Dynamic Lighting Animations | ✅ | ✅ | ✅ |
| Fluidity Animations | ✅ | ✅ | ✅ |
| Depth Effect | ✅ | ✅ | ✅ |
| Clarity and Brilliance Effects | ✅ | ✅ | ✅ |
| Cursor Effects | ✅ | ✅ | ✅ |
Best Practices
Design Tips
- Looks best when placed over motion – try using video background, or fixed containers with scrolling background images or content layered behind it. Avoid solid color backgrounds.
- Use semi-transparent background colors for a more natural blend.
- Use hover background colors (with slightly more opacity) for better interaction and legibility.
- Avoid nesting containers – a Silica container inside another Silica container is not recommended.
Performance Tips
- Limit Liquid Glass: Liquid glass is GPU-intensive; use it on hero sections or featured elements.
Troubleshooting
- Section missing in Elementor?
- Ensure the plugin is active and try regenerating Elementor CSS in Elementor > Tools > Regenerate CSS & Data. If still missing, deactivate and reactivate the plugin.
- Effects looks broken?
- Make sure your browser is up to date.
- Check that the container has no background/ a background with transparency. Solid backgrounds won’t show the glass effect properly.
- Check the Silica page in your WordPress Dashboard. If the effects are working there, you might have other code or effects overwriting Silica’s effects on your website.
- If you use Cloudflare, purge your cache and do a hard refresh on your page.
- Liquid glass not working?
- First, ensure you’re using a Chromium-based browser (Chrome, Edge, Brave, Arc, Opera).
- If you are using a Chromium browser, make sure it is updated.
- If still not visible, check the container has backdrop content behind it (images, videos, or other elements) and that the “Liquid” toggle is ON.
- Performance issues with multiple effects?
- Limit liquid glass elements per page.
- Use the basic glass effect (without liquid) for repeated elements.
- Effects disappear after updating Silica?
- Silica has been optimized to keep current effects on published site after an update.
- If this did not work, simply click on the affected containers and re-apply effects.
- Still having issues?
- Temporarily disable other animation or visual effect plugins to check for JavaScript conflicts. Check your browser console (F12) for error messages.
Account tab showing an error or missing information?
This can happen if you installed Silica before a recent update. To fix it:
Go to Plugins in your WordPress admin
Deactivate Silica
Delete Silica (your page content is safe – this only removes the plugin files)
Reinstall Silica
Reactivate and go through the quick opt-in step
This re-registers your site and clears up any account sync issues.
Support
In your WordPress dashboard:
- Go to Silica -> Contact Us.
- Fill in the form with the following options:
- Technical Support
- Billing Issue
- Feature Request
- Customisation
- Pre-Sale Question
- Press
- Submit a Bug
- Refund
Log into your customer portal to:
- Manage Subscriptions: Easily upgrade, downgrade, or cancel your plans.
- Access Downloads: Get the latest versions of your purchased plugins or themes.
- View License Keys: Find and manage your active license keys and whitelisted sites.
- Billing & Invoices: View your entire payment history and download VAT-compliant invoices.
- Update Payment Methods: Change your credit card details or switch between PayPal and Card.
- Contact Support: Submit technical tickets directly through the integrated support form.
- Customer Portal: https://silicaplugin.com/support/
FAQ
Do I need coding knowledge?
No. Silica is 100% point‑and‑click inside Elementor. You don’t need to write CSS or JavaScript.
Will it slow down my site?
For best performance, we recommend using liquid glass effects on hero sections and a few key components, and using the basic frosted glass effect for repeated UI elements.
Does it work with any theme?
Yes. The plugin specifically hooks into Elementor’s container controls and applies effects through Elementor’s prefix class system. There’s no theme-specific code.
Do you offer support?
Silica is a passion project. We will try our best, however as per the EULA: “Support will be offered at the creator’s discretion”.
What if a non-supported browser visits my site?
Silica gracefully degrades. Basic glass effects work in all modern browsers. The advanced liquid distortion is optimized for Chromium browsers but automatically falls back to standard glassmorphism on Safari/Firefox—still beautiful, just without the distortion effect. Your content remains fully accessible on all browsers.
Last Updated 24 February 2026