We use cookies to help provide you with the best possible online experience.
By using this site, you agree that we may store and access cookies on your device. Cookie policy.
Cookie settings.
Functional Cookies
Functional Cookies are enabled by default at all times so that we can save your preferences for cookie settings and ensure site works and delivers best experience.
3rd Party Cookies
This website uses Google Analytics to collect anonymous information such as the number of visitors to the site, and the most popular pages.
Keeping this cookie enabled helps us to improve our website.
Glassy Effect
Below are a few examples of the glass effects you can achieve with Tailwind CSS Version 2.
Inspired by the newly introduced IOS26 from Apple "Liquid Glass" we have a few ways to achive similar effects should a client ask.
Glass Effect with Image - Dark images only
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Frosted Glass Effect with Image
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Coloured Frosted Glass Effect with Image
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
How to use
The key classes that are needed to achieve this look are the following:
- bg-white - The background colour needs to be a clear colour, white works brilliantly, but a colour could also work here
- bg-opacity-80 - The main thing we should change is the number, so "bg-opacity-[number]"
- backdrop-filter - Allows the image to bleed through
- backdrop-blur-lg - Controls the strength of the blur on the image
- backdrop-saturate-150 - Saturates the colours and tones of the background image.
- shadow-xl - Adds a shadow.
- overflow-hidden - Utilities for controlling how an element handles content that is too large for the container.
- border border-white - The border and colour.
- border-opacity-90 - The border opacity covers the thin stroke that goes around the edges. change the number "border-opacity-[number]" to lighten and darken the effect.
Do you believe in magic?
Tree View Designs are at the cutting edge of creativity and innovation.
Company Registration Number: 06975947
Tree View Designs Ltd is a company registered in England and Wales
Registered office: 1 Christchurch House Beaufort Court, Sir Thomas Longley Road, Rochester, Kent, England, ME2 4FX