Overlay

Ground glass

use ground-glass className to make a "frosted glass" typed background for elements.

Preview

Code

HTML

Code

JSX/TSX

lorem ipsum dolor sit amet, consectetur, lorem ipsum dolor sit amet, consectetur

lorem ipsum dolor sit amet, consectetur

<div class="rounded-xl bg-bw-300 w-full h-40 overflow-scroll relative">
	<div class="success w-full h-20 ground-glass sticky top-0 inset-x-0" />
	<div class="-mt-20">
		<p>
			lorem ipsum dolor sit amet, consectetur, lorem ipsum dolor sit amet,
			consectetur
		</p>
		<p>
			lorem ipsum dolor sit amet, consectetur, lorem ipsum dolor sit amet,
			consectetur
		</p>
		<p>
			lorem ipsum dolor sit amet, consectetur, lorem ipsum dolor sit amet,
			consectetur
		</p>
		<p>
			lorem ipsum dolor sit amet, consectetur, lorem ipsum dolor sit amet,
			consectetur
		</p>
		<p>lorem ipsum dolor sit amet, consectetur</p>
		<p>lorem ipsum dolor sit amet, consectetur</p>
		<p>lorem ipsum dolor sit amet, consectetur</p>
		<p>lorem ipsum dolor sit amet, consectetur</p>
		<p>lorem ipsum dolor sit amet, consectetur</p>
	</div>
</div>

<div className='rounded-xl bg-bw-300 w-full h-40 overflow-scroll relative'>
  <div className='success w-full h-20 ground-glass sticky top-0 inset-x-0' />
  <div className='-mt-20'>
    <p>
      lorem ipsum dolor sit amet, consectetur, lorem ipsum dolor sit amet, consectetur
    </p>
    <p>
      lorem ipsum dolor sit amet, consectetur, lorem ipsum dolor sit amet, consectetur
    </p>
    <p>
      lorem ipsum dolor sit amet, consectetur, lorem ipsum dolor sit amet, consectetur
    </p>
    <p>
      lorem ipsum dolor sit amet, consectetur, lorem ipsum dolor sit amet, consectetur
    </p>
    <p>
      lorem ipsum dolor sit amet, consectetur
    </p>
    <p>
      lorem ipsum dolor sit amet, consectetur
    </p>
    <p>
      lorem ipsum dolor sit amet, consectetur
    </p>
    <p>
      lorem ipsum dolor sit amet, consectetur
    </p>
    <p>
      lorem ipsum dolor sit amet, consectetur
    </p>
  </div>
</div>

Scroll Bar Text