<h1 data-text="CSS"><span>CSS</span></h1>

:root {
  --hs: 225, 100%;
  --paper: hsl(var(--hs), 25%);
  --highlight: hsl(var(--hs), 45%);
  --shadow: hsl(var(--hs), 15%);
}

h1 {
  font-family: "Titillium Web", sans-serif;
  font-size: clamp(8rem, 23vw + 1rem, 20rem);
  letter-spacing: 0.1em;
  display: grid;
  place-items: center;
  grid-template-areas: "text";
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-image: linear-gradient(305deg, tomato, gold, cyan);
  margin: 0;

  & > *,
  &::after {
    grid-area: text;
  }

  &::after {
    content: attr(data-text);
    color: var(--paper);
    transform: translate(0.1em, 0.1em);
    filter: drop-shadow(0.015em 0.015em 0.025em var(--shadow));
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(var(--highlight), var(--paper));
  }
}

body {
  min-height: 100vh;
  display: grid;
  place-content: center;
  background-color: var(--paper);
}