Queer Eye Text Effect in HTML & CSS
Tags: css, html, showdev, tutorial
Published: 2020-09-27 20:45:10

---
title: Queer Eye Text Effect in HTML & CSS
published: true
date: 2020-09-20 01:32:28 UTC
tags: css, html, showdev, tutorial
canonical_url: https://shannoncrabill.com/blog/queer-eye-text-effect-html-css/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/dbh6brkvt5fkpfw0x39a.png
---

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

![](https://i2.wp.com/shannoncrabill.com/blog/wp-content/uploads/2020/09/Queereyelogo2.jpg?resize=316%2C316&ssl=1)

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](https://fonts.google.com/specimen/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.

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

Which renders something like this.

![](https://i0.wp.com/shannoncrabill.com/blog/wp-content/uploads/2020/09/Screen-Shot-2020-09-19-at-8.47.49-PM.png?resize=517%2C373&ssl=1)

## Colors

Looking at the logo above, it seems to be made of blue, pink, yellow and black, with the yellow and blue having some transparency to make a bright green.

Let’s set up our colors as CSS variables.

```css
 :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.

```css
h1 {
     ...
     text-shadow: 5vw 0 var(--pink);
}
```

![](https://i1.wp.com/shannoncrabill.com/blog/wp-content/uploads/2020/09/Screen-Shot-2020-09-19-at-9.00.23-PM.png?resize=557%2C379&ssl=1)

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.

```css
h1 {
     ...
     text-shadow: 
          5vw 0 var(--pink), 
          10vw 0 var(--blue), 
          15vw 0 var(--yellow);
}
```

![](https://i0.wp.com/shannoncrabill.com/blog/wp-content/uploads/2020/09/Screen-Shot-2020-09-19-at-9.03.46-PM.png?resize=626%2C382&ssl=1)

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, the X-coordinate, denotes 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 overlap, rearranging the order of the `text-shadow` properties, allows all the colors to be seen.

```css
h1 {
     ...
     text-shadow: 
          2vw 0 var(--pink),
          -2vw 0 var(--blue),
          -5vw 0 var(--yellow);
}
```

![](https://i0.wp.com/shannoncrabill.com/blog/wp-content/uploads/2020/09/Screen-Shot-2020-09-19-at-9.09.35-PM.png?resize=588%2C395&ssl=1)

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 another CSS 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.

{% codepen https://codepen.io/scrabill/pen/yLORGEv %}
default-tab

Yasss!

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

## Resources

- [https://htmlcolorcodes.com/color-names/](https://htmlcolorcodes.com/color-names/)
- [https://stackoverflow.com/questions/14492695/css-color-names-alpha-transparency](https://stackoverflow.com/questions/14492695/css-color-names-alpha-transparency)
- [https://css-tricks.com/snippets/css/css-text-shadow/](https://css-tricks.com/snippets/css/css-text-shadow/)

The post [Queer Eye Text Effect in HTML & CSS](https://shannoncrabill.com/blog/queer-eye-text-effect-html-css/) appeared first on [Shannon Crabill — Front End Software Engineer](https://shannoncrabill.com/blog).