Collection of free HTML and CSS glassmorphism effect examples from Codepen and other resources
Browse a collection of free HTML and CSS glassmorphism effect code examples from Codepen and other resources to create modern, frosted glass-like designs for your website.
Glassmorphism: Modern Landing Page with Squircle Buttons
About a code The CSS code defines a color scheme using HSL (Hue, Saturation, Lightness) values, which are stored as CSS variables for easy reference and modification. The buttons are designed with a unique squircle shape achieved using the clip-path property. They also have a hover effect that moves the button slightly upwards and increases the opacity of a circular background.
About a code
Glassmorphism Card UI Design
About a code One of the most engaging features of this design is the interactive effect when a card is hovered over. The bottom content, which includes the title, subtitle, and social media icons, transitions from being hidden to visible. This is achieved through a combination of CSS properties such as transition, transform, and opacity.
About a code
Clock Design: Glassmorphism vs Neumorphism
About a code The Glassmorphism style, characterized by its "frosted glass" effect, is achieved using the backdrop-filter CSS property. On the other hand, the Neumorphism style uses the box-shadow CSS property to create a soft, extruded plastic look. Both clocks are updated every second using JavaScript's setInterval function. The rotation of the clock hands is achieved by changing the CSS transform property, creating a dynamic and interactive user experience. Furthermore, the VanillaTilt.init function is used to apply a subtle 3D tilt effect to the Glassmorphism clock, enhancing its interactive and modern design.
About a code
Nested Glassmorphism: Blog Design
About a code The HTML structure is nested, with each layer of nesting representing a different section of the blog post, such as the title, body, and footer. The CSS styling employs the Glassmorphism design trend, using backdrop-filter to apply a blur effect to the background elements, creating a frosted glass effect. The rgba function is used to apply semi-transparent colors, further enhancing the glass-like appearance. The design also uses nested divs, each with a slightly different level of transparency and blur, to create a layered glass effect. This is achieved by adjusting the background-color and backdrop-filter properties for each nested .page class.
About a code
Glassmorphism Effect with HTML and CSS
About a code The HTML structure consists of a card with a profile photo, name, job title, location, company, and email address. The CSS code applies the Glassmorphism effect to the card using the backdrop-filter: blur(10px); property on the .card class, which creates a blurred, glass-like background. The CSS also includes a dark theme (.black-theme) and a light theme (.white-theme), allowing for a switch between two different visual styles. The themes are applied to the entire body of the document, affecting all nested elements.
About a code
Discover Our Extensive Snippet Library
This heading suggests that your website provides a wide variety of snippets across different technologies, encouraging users to explore and use these resources for their development projects.
HTML Snippets.
Explore a collection of HTML snippets designed to streamline your web development process. From basic structures to complex elements.
CSS Snippets.
Discover powerful CSS snippets that help you style your web pages with ease. Whether you need layout solutions, animations
JavaScript Snippets.
Enhance your website's interactivity with our JavaScript snippets. From DOM manipulation to advanced algorithms
Bootstrap Snippets.
Leverage the power of Bootstrap with our collection of snippets. Quickly integrate responsive design components
Tailwind Snippets.
Speed up your development process with Tailwind CSS snippets. These utility-first CSS snippets enable you to
jQuery Snippets.
Simplify your JavaScript development with jQuery snippets. Easily perform common tasks like event handling, animations
Let's craft a visual identity that ignites passion and loyalty. ✨