Craft Collection

Shadowed Font

Last updated: Nov 07, 2023

Applies a shadow effect to text. Customize the shadow by adjusting the --font-shadow CSS variable.

Prerequisites

Styled with CSS.

Preview

Hello World!

Code

shadowed-font.css

css

:root {
  /* Light Theme Font Shadow */
  --font-shadow: 1px -1px #fff, -1px 1px #999, -3px 3px 3px #80808080;
}
 
.dark {
  /* Dark Theme Font Shadow */
  --font-shadow: 1px -1px #333, -1px 1px #666, -3px 3px 3px #ffffff80;
}
 
.shadowed-font {
  line-height: 1;
  letter-spacing: 2px;
  text-shadow: var(--font-shadow);
}

app.tsx

tsx

export default function App() {
  return <p className="shadowed-font">Hello World!</p>;
}