skip to content
Shannon Crabill

Queer Eye Text Effect in HTML & CSS

/ 3 min read

Table of Contents

There’s never enough episodes of Queer Eye.

?

To hold me over until the next season airs, I wanted to revisit the logo and see if I could recreate it in HTML and CSS.

The logo effect has a couple of different elements that I need to figure out.

  • Matching the font
  • Picking the colors
  • Offsetting the colors

Fonts

The font used is likely, a custom, sans-serif font. What makes it interesting is that the e is stylistically a lowercase e and the Q is uppercase. Yet, visually have the same weight, stroke thickness, etc. Finding a free font that matches that may be difficult, so for now, I’ll focus on finding a typeface that has the same vibe.

Kumbh Sans in Google Fonts has the modern look that I’m going for, so we’ll roll with it and fix the e later if I can. With our “QE” in an <h1> tag, our CSS will look something like this.

h1 {
            font-family: 'Kumbh Sans', sans-serif;
            font-weight: 300;
        }

Which renders something like this.

Colors

Looking at the logo above, it seems to be made of blue, pink, yellow and black, which the yellow and blue having some transparency to make a bright green. Let’s set up our color variables.

 :root {
            --blue: rgb(0, 191, 255);
            --pink: rgb(255, 20, 147);
            --yellow: rgb(255, 255, 0);
            --black: rgb(0,0,0);
 }

With color variables, we can reference them like this color: --var(yellow).

Offsetting The Colors

The fun part!

Each of the colors is offset a little from the main text, but only to the left and right. We can get this effect by using a text-shadow. Let’s do the first color.

text-shadow: 5vw 0 var(--pink);

Now, for the other colors. You can specify multiple text-shadow effects at once, by separating them with a comma. Let’s add the rest of our colors and see how it looks.

text-shadow:
     5vw 0 var(--pink),
     10vw 0 var(--blue),
     15vw 0 var(--yellow);

Trippy.

Not quite the effect we are going for, but it’s getting close. I’ll make some adjustments to the text-shadow arguments, so that they shift to the left and right of the black text, without straying so far away.

By default, the first value of, the X-coordinate, how far to the right the text-shadow starts. A negative value can be used so that the shadow starts to the left.

And since most of our colors overlaps, rearranging the order of the text-shadow properties, allows all the colors to show through.

text-shadow:
            2vw 0 var(--pink),
            -2vw 0 var(--blue),
            -5vw 0 var(--yellow);

Nice!

At this point, we’re only missing some green, created by a semi-transparent blue and yellow blending together. The opacity may take some tweaking, so I’ll add that as a variable that I can then reference in the --blue variable.

:root {
    --opacity: .75;
    --blue: rgb(0, 191, 255, var(--opacity));
    --pink: rgb(255, 20, 147);
    --yellow: rgb(255, 255, 0);
    --black: rgb(0,0,0);
}

Putting it all Together

And our end result looks like this.

Yasss!

Antoni, Tan, Karamo, Bobby, and Johathan would be proud.

Resources