CSS Only Glass effect (liquid glass 'lite version' from WWDC25)

css-only-glass-effect-liquid-glass-lite-version-from-wwdc25.markdown

CSS Only Glass effect (liquid glass 'lite version' from WWDC25)

A Pen by Alex on CodePen.

License.

index.html

<main>
  <div class="glass-grid">
    <div class="glass-effect glass-2-1"></div>
    <div class="glass-effect glass-2-2"></div>
    <div class="glass-effect glass-1-1"></div>
    <div class="glass-effect glass-1-1"></div>
    <div class="glass-effect glass-2-1"></div>
    <div class="glass-effect glass-1-1"></div>
    <div class="glass-effect glass-1-1"></div>
  </div>   
</main>

 <!-- photo credits --> 
  <div class="credits">
    Photo by <a href="https://unsplash.com/@jarvisphoto?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank">Braden Jarvis</a> on <a  target="_blank" href="https://unsplash.com/photos/aerial-photography-of-green-mountain-beside-body-of-water-under-white-sky-prSogOoFmkw?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>
  </div>
 <!-- / photo credits --> 

script.js

/*

Clean CSS and performant.

The bright corners are made by adding 2 inset shadows to the stack.

Does not have lens warping effect like the ones 
from the new Apple liquid glass design have :(

*/

style.css

    .glass-grid {
        font-size: 5vmin;
        display: grid;
        grid-gap: 1em;
        grid-template-columns: repeat(4, 1fr);
    }
    .glass-effect {
        background-color: oklch(1 0 0 / 10%);
        backdrop-filter: blur(0.25em) brightness(1.2) saturate(1.2);
        min-height: 4em;
        min-width: 4em;
        border-radius: 2em;
        box-shadow:
          /* direct "classic" shadow */
          0 0.1em 0.25em 0 oklch(0 0 0 / 15%), 
          /* ambient shadow */
          0 0 1em 0 oklch(0 0 0 / 12.5%),      
          /* top left corner highlight */
          inset 0.075em 0.075em 0.05em 0 oklch(1 0 0 / 40%), 
          /* bottom right corner highlight */
          inset -0.075em -0.075em 0.05em 0 oklch(1 0 0 / 40%), 
          /* inside shadow, occlusion arround the corners */
          inset 0 0 3em .5em oklch(0 0 0 / 20%); 

        transform: scale(1);
        transition: transform .1s ease-out, background-color .15s ease-out;
        &:hover {
            transform: scale(1.02);
            background-color: oklch(1 0 0 / 15%);
        }
    }
    
    .glass-1-1 {

    }
    .glass-2-1 {
        grid-column: 2 span;
    }
    .glass-4-1 {
        grid-column: 4 span;
    }
    .glass-2-2 {
        grid-column: 2 span;
        grid-row: 2 span;
    }

    body { padding: 0; margin: 0;}
    * {
        box-sizing: border-box;
    }
    main  {
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
body {
  background-image: url("https://images.unsplash.com/photo-1505852679233-d9fd70aff56d?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
  background-size: cover;
  background-position: 50% 50%;
}
.credits {
  position: absolute;
  bottom: 10px;
  left: 10px;
}