Decorate your SpaceHey logo with any image/pride flag you want!

Tags: pride, twilight, logo, gradient, background

Description:

CURRENTLY BROKEN, SORRY

I've updated it so that if static.spacehey.net gets CORS it'll work, but I don't know if that's happening.

Ever wanted to give the SpaceHey logo a certain gradient but haven't been able to?

Or perhaps you wanna put a pattern image under it?

Don't want to bother with image editing just to see how it'd look? Here you go!

(This may not work on some browsers — mask is still an experimental CSS property! Check https://caniuse.com/css-masks for more info. This has been tested on latest desktop Chrome and latest desktop Firefox. If your browser doesn't support it, it should gracefully failback to the original logo.)

By default, this will put the SpaceHey logo in trans flag colors.

You can either replace the "background:" rule with background: url([your image you want to use]), or replace it with one of these for more pride flags!

(Please leave the credit comment in the style tag in when you use it!)

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Twilight Sparkle (https://layouts.spacehey.com/layout?id=1805) -->

<style>
/* Logo modifier by Twilight Sparkle! https://layouts.spacehey.com/layout?id=1805 */
@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
  .top > .left > a > .logo {
    display: none;
  }
  .top .left a {
    background: linear-gradient(180deg, #5BCEFA 20%, #F5A9B8 20%, 40%, #FFFFFF 40%, 60%, #F5A9B8 60%, 80%, #5BCEFA 80%);
    background-size: cover;
    mask: url("https://static.spacehey.net/img/logo.svg") no-repeat center;
    mask-size: contain;
    -webkit-mask: url("https://static.spacehey.net/img/logo.svg") no-repeat center;
    -webkit-mask-size: contain;
    height: 42px;
    width: 165px;
    display: inline-block;
  }
}
</style>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 20 of 99 comments ( View all | Add Comment )

⋆°𖦹 mason ✩.ᐟ₊	1731797358 trying it out!! Report Comment doesn't work ;( by ⋆°𖦹 mason ✩.ᐟ₊; 1731797423; Report
Eden ^^	1731414757 Using if it workss!! Report Comment
Darla	1731118478 using if i can Report Comment
📼🪱/Lawnmower!! >:3/🌈🌴	1729897966 If it works i'll try 2 use it!! x3 Report Comment
✎leonia	1729876974 using Report Comment
✦L0v3ly✦	1729811019 USING!! Report Comment
Lau	1729357977 gonna try :v Report Comment
WE1RD0 L0LZ!!	1729321168 If it works ill be using! Report Comment
lucas	1729280101 gonna try to use this! Report Comment
𓈒 phobic ,,　　𓏲	1729070072 might use if its not broken!! Report Comment
UrPalBug	1728600537 i think I messed it up but I find it funny how its immediately just the trans flag so using Report Comment hey so idk if youll be flagged or sum for using it because in the layouts your not really allowed to cover the logo so i think you should remove it... (up to u ofc) by V1D4<33; 1729336817; Report awww :( that's sad. anyways yeah its down now cause I was worried about it messing everything else up. by UrPalBug; 1730680387; Report
toast :3	1728427869 using i think Report Comment
M3rcUrY ☆☆	1728179100 g0nn4 try 2 uz3!! Report Comment
Manik	1728121993 for img bg just delete the: background: linear-gradient(180deg, #5BCEFA 20%, #F5A9B8 20%, 40%, #FFFFFF 40%, 60%, #F5A9B8 60%, 80%, #5BCEFA 80%); and replace it with: background: url("img link here"); Report Comment Love you by Nighty.love; 1728520831; Report oh- by UrPalBug; 1728600556; Report Hehehehe :3 by Nighty.love; 1728769967; Report
𝖆𝖑𝖊𝖝:3	1727753382 usingggg (if i can figure it out) Report Comment
TH30	1727619058 using!!!!! ദ്ദി(˵ •̀ ᴗ - ˵ ) ✧ Report Comment
Whambamdeliham	1727314578 Using :) Report Comment
𝕲𝖆𝖞 𝖛𝖆𝖒𝖕𝖎𝖗𝖊	1727131183 using!! :3 Report Comment
AIBUAC	1726457358 using! Report Comment
⋆˚࿔ 𝒟𝒶𝓃𝒾 𝜗𝜚˚⋆	1726238523 usando!! Report Comment