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.

They're called stripes, Ed.

Herself

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.

.gucci-stripes {
  box-sizing: border-box;
  border: 8px solid var(--g-blue);
  position: relative;

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

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

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

  /* Red stripes */
  background: linear-gradient(to right, var(--g-red-dark), var(--g-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
  );
}

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