CSS text-shadow playground

Combine up to three text shadows, adjust their offsets, blur, and color, and generate copy-ready code.

Shadows that add depth to text

HTML

<h2 class="text-shadow-sample">Shadows that add depth to text</h2>

Tailwind CSS

Some classes with arbitrary values can be replaced by native classes, depending on the value and your Tailwind CSS configuration.

<h2 class="box-border grid min-h-[18rem] min-w-0 w-full max-w-2xl place-items-center p-6 bg-[#4f46e5] text-[#f8fafc] text-[64px] font-black leading-[1.05] text-center text-balance [overflow-wrap:anywhere] [text-shadow:3px_5px_8px_#17203399]">Shadows that add depth to text</h2>

CSS

.text-shadow-sample {
  box-sizing: border-box;
  inline-size: min(100%, 42rem);
  min-inline-size: 0;
  min-block-size: 18rem;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background-color: #4f46e5;
  color: #f8fafc;
  font-size: 64px;
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: anywhere;
  text-shadow: 3px 5px 8px #17203399;
}