In this guide, we will show you how to add a Glass Icons widget to your Elementor website. The Glass Icons widget lets you display your social links in style using frosted-glass effects, soft gradients, and layered 3D depth, creating a modern and elegant visual experience. Ideal for social media sections, headers, footers, and personal or brand profiles, this widget helps enhance visual appeal while keeping your design clean and interactive. With flexible layout and styling options, you can seamlessly align the glass icon effects with your website’s overall design.
Let’s explore the customization options available in the Glass Icons widget for Elementor below.
Add a Free Glass Icons widget to Elementor
Add a Free Glass Icons widget to an Elementor Page
Elementor Glass Icons widget Widget General Settings
Title
Allows you to enter and customize the text label for an individual item.
Icon
A field to select or upload a graphical icon to represent the item.
Link
Defines the URL or internal destination where the user is directed when clicking the item.
Background Color
Sets a specific background color for that individual item's container.
Elementor Glass Icons widget Widget Style Settings
Align Icons
Sets the horizontal alignment of the icons within their container.
Icon Direction
Determines if the icons are laid out horizontally or vertically.
Icon Gap
Controls the amount of space between each icon.
Icon Size
Adjusts the scale and dimensions of the icon itself.
Background Size
Defines the size of the background area surrounding the icon.
Border Radius
Rounds the corners of the icon's background or border.
Normal / Hover Toggle
Switches between styling for the icon's default state and its appearance when a user hovers over it.
Icon Color
Sets the specific color of the icon element.
Icon Glass Background Color
Controls the color and transparency of the glass-effect background.
Icon Background Blur
Adjusts the intensity of the blur effect behind the icon.
Icon Background Scale
Increases or decreases the size of the background element relative to the icon.
Icon Background Vertical Position
Shifts the background element up or down.
Icon Background Horizontal Position
Shifts the background element left or right.
Icon Background Rotation (deg)
Tilts or rotates the background element by a specific degree.
Border Type
Selects the style of the border (e.g., Solid, Double).
Border Width
Sets the thickness of the border on each side.
Border Color
Defines the color of the border surrounding the icon.
Thank you for using the Glass Icons Widget for Elementor! This widget allows you to showcase your social links with stunning frosted-glass effects, soft gradients, and layered 3D depth for a modern and elegant look. Perfect for headers, footers, social sections, and personal or brand profiles, it enhances visual appeal while keeping your layout clean and interactive. With flexible layout and styling options, you can easily match the glass icon design to your website’s overall aesthetic. If you have any questions or need assistance, feel free to reach out. For inspiration and live demos, don’t forget to visit our website.