Add a Pride Color Strip to Your Website with CSS

For Pride Month, I added a narrow color strip across the top of my blog. You can create the same effect with a CSS gradient whose color widths adapt to the page width.

Add the CSS

Place this in your stylesheet, or create a separate CSS file and include it in the page:

.pride {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px; 
  z-index: 99999;

  background: linear-gradient(
    90deg,
    #7dd3fc 0%, #7dd3fc 9.09%,
    #f472b6 9.09%, #f472b6 18.18%,
    #ffffff 18.18%, #ffffff 27.27%,
    #f472b6 27.27%, #f472b6 36.36%,
    #7dd3fc 36.36%, #7dd3fc 45.45%,
    #ef4444 45.45%, #ef4444 54.54%,
    #f97316 54.54%, #f97316 63.63%,
    #facc15 63.63%, #facc15 72.72%,
    #22c55e 72.72%, #22c55e 81.81%,
    #3b82f6 81.81%, #3b82f6 90.9%,
    #a855f7 90.9%, #a855f7 100%
  );

  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), 
              0 2px 10px rgba(0, 0, 0, 0.06);
}

Change the hex color values to customize the palette. The percentages control each segment's width; the height controls the thickness of the strip.

Add the HTML

Place this inside the page's body. The strip is decorative, so it can be hidden from assistive technology:

<div class="pride" aria-hidden="true"></div>

Check that the fixed strip does not cover navigation controls. You can also adjust its height and stacking order to suit your layout.

Adapted from the original Chinese article, published on June 5, 2026.