@moonjellydigitalPride Flags

Add beautiful pride flag designs to your web projects with just a few lines of code.

GitHub NPM

Features

Lightweight

1.5KB minified and gzipped. No dependencies, just pure CSS.

Integrates With Any Project

Since Pride Flags is just CSS, you can use it with any framework or CMS, and with website builders like Shopify and Squarespace.

Customizable

All of the colors and flag gradients are available as CSS custom properties if you want to build your own classes for a special design.

Browser Support

Pride Flags supports the listed browsers without any transpilation.

Chrome 111+

Edge 111+

Safari 15.4+

Safari on iOS 15.4+

Firefox 113+

Opera 97+

Installation

npm: npm install @moonjellydigital/pride-flags

pnpm: pnpm add @moonjellydigital/pride-flags

yarn: yarn add @moonjellydigital/pride-flags

bun: bun add @moonjellydigital/pride-flags

Download

Download only the stylesheet file in minified or unminified formats.

Normal Minified

CDN

Served from the free jsDelivr and UNPKG CDNs for great performance without any build step.

You can specify a version, version range, and minified or not from both CDNs. Refer to their documentation for details.

jsDelivr UNPKG

Usage

Importing

In a stylesheet: @import url('node_modules/@moonjellydigital/pride-flags/pride-flags.css');

In the document head: <link rel="stylesheet" href="node_modules/@moonjellydigital/pride-flags/pride-flags.css">

In a component file: import 'node_modules/@moonjellydigital/pride-flags/pride-flags.css;'

Applying CSS

Use a CSS class

<div class="rainbow-horizontal"></div>

Use a CSS custom property 

.my-class {
  background: var(--rainbow-horizontal);
}

Both ready-to-use classes and CSS custom properties are available. The classes and custom properties are listed under each flag design in the Flags section. The custom properties for each color are listed in the Color Swatches section if you want to make your own design.

All of the designs are simply CSS gradients. You can add them to just about any element on your site: the header, the footer, buttons, the body tag. When using the custom properties, set the value of background or background-image to the custom property using the var() function.

With the exception of the Progress design, flags have classes with an aspect ratio and without. Classes without an aspect ratio will conform to whatever dimensions the element has. Classes with an aspect ratio use the aspect-ratio property to change the dimensions of the element to maintain the ratio.

When using the classes with aspect ratios, only set the width or height not both, otherwise the aspect ratio will be overridden. Alternatively, you can set both max-width and max-height to maintain the aspect ratio. If you need the flag to keep the aspect ratio and fit inside a box with fixed width and height, you can add a fixed-size wrapper around the element with the flag class and apply max-width and max-height to the flag element. This will make it behave similarly to object-fit: contain.

Notes on the Progress design: The Progress design only comes in vertical and horizontal orientations because the diagonal gradients simply don't look good. This flag really needs an aspect ratio for the chevron design to work. The CSS classes are the recommended way to use this design, but if you need to use the custom properties to style a pseudo-element, then you'll probably want to apply your own aspect ratio to it. If you need the colors in this design but need it to work without an aspect ratio, try the New Pride design instead.

Flags

Gilbert Baker

CSS Properties

Horizontal: --baker-horizontal

Vertical: --baker-vertical

Diagonal: --baker-diagonal

CSS Classes

Horizontal: baker-horizontal

Horizontal, 5:3: baker-horizontal-5-3

Vertical: baker-vertical

Vertical, 3:5: baker-vertical-3-5

Diagonal: baker-diagonal

Rainbow Flag

CSS Properties

Horizontal: --rainbow-horizontal

Vertical: --rainbow-vertical

Diagonal: --rainbow-diagonal

CSS Classes

Horizontal: rainbow-horizontal

Horizontal, 5:3: rainbow-horizontal-5-3

Vertical: rainbow-vertical

Vertical, 3:5: rainbow-vertical-3-5

Diagonal: rainbow-diagonal

Philadelphia

CSS Properties

Horizontal: --philadelphia-horizontal

Vertical: --philadelphia-vertical

Diagonal: --philadelphia-diagonal

CSS Classes

Horizontal: philadelphia-horizontal

Horizontal, 5:3: philadelphia-horizontal-5-3

Vertical: philadelphia-vertical

Vertical, 3:5: philadelphia-vertical-3-5

Diagonal: philadelphia-diagonal

Progress

CSS Properties

Horizontal: --progress-horizontal

Vertical: --progress-vertical

CSS Classes

Horizontal, 5:3: progress-horizontal-5-3

Vertical, 3:5: progress-vertical-3-5

New Pride

CSS Properties

Horizontal: --new-pride-horizontal

Vertical: --new-pride-vertical

Diagonal: --new-pride-diagonal

CSS Classes

Horizontal: new-pride-horizontal

Horizontal, 5:3: new-pride-horizontal-5-3

Vertical: new-pride-vertical

Vertical, 3:5: new-pride-vertical-3-5

Diagonal: new-pride-diagonal

Bisexual

CSS Properties

Horizontal: --bisexual-horizontal

Vertical: --bisexual-vertical

Diagonal: --bisexual-diagonal

CSS Classes

Horizontal: bisexual-horizontal

Horizontal, 5:3: bisexual-horizontal-5-3

Vertical: bisexual-vertical

Vertical, 3:5: bisexual-vertical-3-5

Diagonal: bisexual-diagonal

Lesbian

CSS Properties

Horizontal: --lesbian-horizontal

Vertical: --lesbian-vertical

Diagonal: --lesbian-diagonal

CSS Classes

Horizontal: lesbian-horizontal

Horizontal, 5:3: lesbian-horizontal-5-3

Vertical: lesbian-vertical

Vertical, 3:5: lesbian-vertical-3-5

Diagonal: lesbian-diagonal

Transgender

CSS Properties

Horizontal: --transgender-horizontal

Vertical: --transgender-vertical

Diagonal: --transgender-diagonal

CSS Classes

Horizontal: transgender-horizontal

Horizontal, 5:3: transgender-horizontal-5-3

Vertical: transgender-vertical

Vertical, 3:5: transgender-vertical-3-5

Diagonal: transgender-diagonal

Nonbinary

CSS Properties

Horizontal: --nonbinary-horizontal

Vertical: --nonbinary-vertical

Diagonal: --nonbinary-diagonal

CSS Classes

Horizontal: nonbinary-horizontal

Horizontal, 5:3: nonbinary-horizontal-5-3

Vertical: nonbinary-vertical

Vertical, 3:5: nonbinary-vertical-3-5

Diagonal: nonbinary-diagonal

Color Swatches

See which colors go with which flag on Pantone.

Pantone 812 C

--pantone-812-c

Pantone 2347 C

--pantone-2347-c

Pantone 2018 C

--pantone-2018-c

Pantone 3945 C

--pantone-3945-c

Pantone 356 C

--pantone-356-c

Pantone 3262 C

--pantone-3262-c

Pantone 2726 C

--pantone-2726-c

Pantone 253 C

--pantone-253-c

Pantone Black C

--pantone-black-c

Pantone 731 C

--pantone-731-c

Pantone 0521 C

--pantone-0521-c

Pantone Blue 0821 C

--pantone-blue-0821-c

Pantone Black 6 C

--pantone-black-6-c

Pantone 2320 C

--pantone-2320-c

Pantone 226 C

--pantone-226-c

Pantone 258 C

--pantone-258-c

Pantone 286 C

--pantone-286-c

Pantone 2349 C

--pantone-2349-c

Pantone 1565 C

--pantone-1565-c

Pantone 674 C

--pantone-674-c

Pantone 234 C

--pantone-234-c

Pantone Blue 305 C

--pantone-blue-305-c

Pantone 700 C

--pantone-700-c

White

--white

Pantone 394 C

--pantone-394-c

Pantone 265 C

--pantone-265-c