Shadow

We provide a basic className has-shadow that can be used to define shadow on elements.

Preview

Code

HTML

Code

JSX/TSX

<div class="rounded-xl w-20 h-20 has-shadow" />

<div className='rounded-xl w-20 h-20 has-shadow' />

And also provide a series of shadow classes to adjust the appearance of shadow.

You can also combine these classes with your own discretion.

wider widest compact control the radius of the shadow
bolder boldest control the color saturation of the shadow
rainbow a unique className to generate a shadow like rainbow

Preview

Code

HTML

Code

JSX/TSX

default

wider

widest

compact

compact bolder

compact boldest

bolder

boldest

boldest widest

rainbow

<div
	class="grid grid-cols-3 h-[50vh] gap-20 py-10 px-10 place-items-stretch place-content-stretch"
>
	<div class="rounded-xl has-shadow">default</div>
	<div class="rounded-xl has-shadow wider">wider</div>
	<div class="rounded-xl has-shadow widest">widest</div>
	<div class="rounded-xl has-shadow compact">compact</div>
	<div class="rounded-xl has-shadow compact bolder">compact bolder</div>
	<div class="rounded-xl has-shadow compact boldest">compact boldest</div>
	<div class="rounded-xl has-shadow bolder">bolder</div>
	<div class="rounded-xl has-shadow boldest">boldest</div>
	<div class="rounded-xl has-shadow boldest widest">boldest widest</div>
	<div class="rounded-xl has-shadow rainbow">rainbow</div>
</div>

<div className='grid grid-cols-3 h-[50vh] gap-20 py-10 px-10 place-items-stretch place-content-stretch'>
  <div className='rounded-xl has-shadow'>
    default
  </div>
  <div className='rounded-xl has-shadow wider'>
    wider
  </div>
  <div className='rounded-xl has-shadow widest'>
    widest
  </div>
  <div className='rounded-xl has-shadow compact'>
    compact
  </div>
  <div className='rounded-xl has-shadow compact bolder'>
    compact bolder
  </div>
  <div className='rounded-xl has-shadow compact boldest'>
    compact boldest
  </div>
  <div className='rounded-xl has-shadow bolder'>
    bolder
  </div>
  <div className='rounded-xl has-shadow boldest'>
    boldest
  </div>
  <div className='rounded-xl has-shadow boldest widest'>
    boldest widest
  </div>
  <div className='rounded-xl has-shadow rainbow'>
    rainbow
  </div>
</div>

Overview Outline