The Indoorsman

Monét X Change is one of my favorite queens from Drag Race.

Sponge dress aside, she has an impeccable fashion sense. So I doodled a CSS trinket inspired by a jacket she wore for an interview back in 2020.

That jacket though

Here's Monét from an article in Fast Company sporting a Gucci track jacket from the brand's 2019 collection, designed by Alessandro Michele.

The CSS to recreate this pattern is fairly simple, but I wasn't sure at first how I would implement the "double gradient stripe" effect I wanted, where we fade from dark red and dark green in the top-left to light red and light green in the bottom-right. Except I knew I didn't want to just do a single black-to-transparent multiplied overlay. I wanted to really capture the feeling of the jacket by sampling its true colors.

I settled on a green gradient background with overlaid red stripes via a second, masked gradient in red. The stripes are just a repeating-linear-gradient in the mask.

Then I finished off the look with a chunky white and black border, where the white wraps around just a bit more than 50% due to some overlapping border / drop-shadow silliness.

They're called stripes, Ed.

Skip straight to the codepen!

.block {
  box-sizing: border-box;
  border: 8px solid var(--blue);
  height: 100%;
  position: relative;
  width: 100%;

  isolation: isolate;
  /* Green stripes */
  background:
    linear-gradient(to bottom right, var(--green-dark), var(--green-light));

  /* Text */
  -webkit-text-stroke-width: 5px;
  -webkit-text-stroke-color: var(--black);
  -webkit-text-fill-color: var(--white);
  -webkit-text-stroke: 6px var(--black);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2.5em;
  font-weight: bolder;
  padding: 0 1em;
  paint-order: stroke fill;

  /* Shadow */
  filter: drop-shadow(8px 8px var(--shadow));
}
.block::after {
  content: "";
  inset: 0;
  position: absolute;
  pointer-events: none;
  z-index: -1;

  /* Red stripes */
  background: linear-gradient(to right, var(--red-dark), var(--red-light));
  -webkit-mask-image: repeating-linear-gradient(
    45deg,
    black,
    black 8px,
    transparent 8px,
    transparent 16px
  );
  mask-image: repeating-linear-gradient(
    45deg,
    black,
    black 8px,
    transparent 8px,
    transparent 16px
  );
}

.wrapper {
  border: 8px solid var(--white);
}