HTML mini pride flags + decor

GutterGlitter

Info

Created: 8 months, 25 days ago
Creator: https://Hiilumaru
Favorites: 181

Profile

html pride flags

Click the boxes to copy the code inside! I've provided codes for simple-striped flags and decorations, color codes for specific flags are available online for you to make whichever ones you want. To make custom-width stripes, i recommend using circlejourney's code editor - you can make any single-direction stripe pattern (horizontal, vertical, diagonal) by adjusting the percentages.

make sure each stripe starts at the same value that the previous stripe ended

if it breaks, check to make sure all punctuation is in place

direction isn't needed - delete and leave the direction spot blank for default stripes

Flag base

Base (copy this first)

                <div style="
                width: 60px;
                height: 40px;
                border: 1px solid #000;
                border-radius:5px;
                background:linear-gradient(
                    <!-- DIRECTION - DELETE THIS TEXT -->
                    <!-- PASTE STRIPE CODE HERE - DELETE THIS TEXT -->
                );">
                <!-- paste inside decoration code here - delete this text-->
            </div>

3-stripe

                #f72088 0%, #f72088 33%,
                #f7d100 33%, #f7d100 66%,
                #20abf7 66%, #20abf7 100%

4-stripe

                #f4ec32 0%, #f4ec32 25%,
                #f4f4f4 25%, #f4f4f4 50%,
                #9756ca 50%, #9756ca 75%,
                #2b2b2b 75%, #2b2b2b 100%

5-stripe

                #61c5ec 0%, #61c5ec 20%,
                #eda0b8 20%, #eda0b8 40%,
                #f7f7f7 40%, #f7f7f7 60%,
                #eda0b8 60%, #eda0b8 80%,
                #61c5ec 80%, #61c5ec 100%

6-stripe

                #e62124 0%, #e62124 16%,
                #f19120 16%, #f19120 33%,
                #e9e41a 33%, #e9e41a 50%,
                #0c9647 50%, #0c9647 66%,
                #3751a0 66%, #3751a0 83%,
                #8e288a 83%, #8e288a 100%

vertical

                to right,

Angled (degrees)

                45deg

Decorations

Center icon

                <div class="mt-2">
                    <i class="fa fa-heart" style="color:#000"></i>
                </div>

Icon with border

                <div class="mt-2">
                    <i class="fa fa-heart" style="color:#000; text-shadow: 1px 1px 0px #fff, -1px 1px 0px #fff, 1px -1px 0px #fff, -1px -1px 0px #fff;"></i>
                </div>

Image effect

go here for a list of blend modes

                <div class="h-100 w-100 m-0 p-0" style="
                    Background-image: url(IMAGE LINK);
                    mix-blend-mode: overlay;
                "></div>

Pixel deco

Some of these go with specific border colors. Change the border color of the flag to match! All of these are made by me ^_^ all pixels can be found in the tab of this listing if you'd like to mix and match them.

Tiny hearts

                <div class="text-left w-50" style="margin-top:-4px; margin-left:1px;">
                    <img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/72416958_QnB.png">
                </div>
                <div class="text-right w-50 h-100">
                    <img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/72416962_L7D.png" style="position:absolute; bottom:17px; left:62px">
                </div>
                </div>

Recent Images

No images.