Create dreamy fused-glass overlay effect with Yogurt CSS

Full Documentation

How?

Create a two empty elements stacked together with Position and Top/Bottom/Left/Right utilities.

<div class=”relative”>
<!– Background Layer –>
<div class=”absolute top-0 left-0″>
&l…

Full Documentation



How?

Create a two empty elements stacked together with Position and Top/Bottom/Left/Right utilities.

<div class="relative">
  <!-- Background Layer -->
  <div class="absolute top-0 left-0">
    <img class="..." src="...">
  </div>
  <!-- Foreground Layer -->
  <div class="..."></div>
</div>

Set up Background Layer image to spread across the screen with Height and Width utilities.

Set focus on the center of the image with Object Fit and set the alignment to top (optional) with Object Position utilities.

<div class="relative">
  <!-- Background Layer -->
  <div class="absolute top-0 left-0">
    <img class="h-screen w-screen ... object-cover object-top" src="...">
  </div>
  <!-- Foreground Layer -->
  <div class="..."></div>
</div>

Use Overflow utilities to prevent any element overflowing the screen edge to hide the scrollbars.

Center for the Foreground Layer with Flex, Justify-Content and Align Items utilities.

<div class="relative ... h-screen ... flex justify-center items-center ... overflow-hidden">
  <!-- Background Layer -->
  <div class="absolute top-0 left-0">
    <img class="h-screen w-screen ... object-cover object-top" src="...">
  </div>
  <!-- Foreground Layer -->
  <div class="..."></div>
</div>

At Foreground Layer, set the element to bg-transparent with Background Color and add blur effect with Backdrop Blur utilities. Final touch up to add a dreamy shadow with Box Shadow utilities.

<div class="relative ... h-screen ... flex justify-center items-center ... overflow-hidden">
  <!-- Background Layer -->
  <div class="absolute top-0 left-0">
    <img class="h-screen w-screen ... object-cover object-top" src="...">
  </div>
  <!-- Foreground Layer -->
  <div class="h-72 w-72 ... bg-transparent ... backdrop-filter blur-6 ... shadow-dreamy-md"></div>
</div>

Visit Yogurt Playground to have experience of the Yogurt CSS with fullness.

Enjoy then!


Print Share Comment Cite Upload Translate
APA
Loouis Low | Sciencx (2024-03-29T06:28:15+00:00) » Create dreamy fused-glass overlay effect with Yogurt CSS. Retrieved from https://www.scien.cx/2021/06/11/create-dreamy-fused-glass-overlay-effect-with-yogurt-css/.
MLA
" » Create dreamy fused-glass overlay effect with Yogurt CSS." Loouis Low | Sciencx - Friday June 11, 2021, https://www.scien.cx/2021/06/11/create-dreamy-fused-glass-overlay-effect-with-yogurt-css/
HARVARD
Loouis Low | Sciencx Friday June 11, 2021 » Create dreamy fused-glass overlay effect with Yogurt CSS., viewed 2024-03-29T06:28:15+00:00,<https://www.scien.cx/2021/06/11/create-dreamy-fused-glass-overlay-effect-with-yogurt-css/>
VANCOUVER
Loouis Low | Sciencx - » Create dreamy fused-glass overlay effect with Yogurt CSS. [Internet]. [Accessed 2024-03-29T06:28:15+00:00]. Available from: https://www.scien.cx/2021/06/11/create-dreamy-fused-glass-overlay-effect-with-yogurt-css/
CHICAGO
" » Create dreamy fused-glass overlay effect with Yogurt CSS." Loouis Low | Sciencx - Accessed 2024-03-29T06:28:15+00:00. https://www.scien.cx/2021/06/11/create-dreamy-fused-glass-overlay-effect-with-yogurt-css/
IEEE
" » Create dreamy fused-glass overlay effect with Yogurt CSS." Loouis Low | Sciencx [Online]. Available: https://www.scien.cx/2021/06/11/create-dreamy-fused-glass-overlay-effect-with-yogurt-css/. [Accessed: 2024-03-29T06:28:15+00:00]
rf:citation
» Create dreamy fused-glass overlay effect with Yogurt CSS | Loouis Low | Sciencx | https://www.scien.cx/2021/06/11/create-dreamy-fused-glass-overlay-effect-with-yogurt-css/ | 2024-03-29T06:28:15+00:00
https://github.com/addpipe/simple-recorderjs-demo