We use cookies to make this site work. We'd also like to set optional cookies so we can understand how the site is used and improve it. We will not set optional cookies unless you accept them. You can change your choice at any time from the Cookie settings link in the footer.
Strictly necessary cookies
These cookies are required for the site to work. They store your cookie preferences and keep your session secure. They are exempt from consent under PECR Regulation 6(4) because they are essential to deliver the service you have requested.
Optional cookies
Optional cookies help us understand how the site is used and provide additional features such as analytics, accessibility tools and translation. We will only set them if you accept.
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