Rainbowcore/Glitchcore Layout (Color Fading Borders)

Tags: rainbow, glitch, eyestrain, scene

Description:

EYESTRAIN CW!!! There is also an added screen for when someone clicks on your profile as a warning (Credit to swagstuck𖤐 ۬◦.`for loading screen code) Anyway, enjoy! And if you use it I'd really appreciate credit or a simple comment on this post to boost it, thank you :)

Preview:

click on the image for a larger preview

Code:

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

<style>
/* DO NOT REMOVE THIS CODE OR CHANGE THE IMAGE. It is a warning for this specific layout. Credit to swagstuck𖤐 ۬◦.`for the loading screen code! */
body::before {
content: "";
display: block;
position: fixed;
left: -32px;
top: 0;
width: calc(100% + 32px);
height: calc(100% + 32px);
background-image: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/63b9274d-71a3-402d-b125-4eb915a384cf/dff3ri8-ff4d1ee6-21ac-4018-9868-5725aeb7658a.png/v1/fill/w_1280,h_604,q_80,strp/eyestrain_warning_by_birdsblog_dff3ri8-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9NjA0IiwicGF0aCI6IlwvZlwvNjNiOTI3NGQtNzFhMy00MDJkLWIxMjUtNGViOTE1YTM4NGNmXC9kZmYzcmk4LWZmNGQxZWU2LTIxYWMtNDAxOC05ODY4LTU3MjVhZWI3NjU4YS5wbmciLCJ3aWR0aCI6Ijw9MTI4MCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.ylXYiMQHXL--gFMRgrr8Fit5g0P60_Ad3Z8t4noZzc8);
background-size: cover;
background-position: center;
background-repeat: repeat;
z-index: 10000000;
animation: ScanlineAnimationRight 0.2s linear infinite;
pointer-events: none;
opacity: 1;
animation: hide 0.9s linear 1s 1 forwards;
}

@keyframes hide {
to {
opacity: 0;
}
}

:root {
        text-shadow: 0px 0px 6px;
        --logo-blue: ;
        --darker-blue: ;
        --lighter-blue: ;
        --even-lighter-blue: ;
        --lightest-blue: ;
        --dark-orange: ;
        --light-orange: ;
        --even-lighter-orange: ;
        --green: ;
    }

    .profile{
        background-color: #050308E3;
        border-radius: 30px;
        border: 7px solid white;
        box-shadow: 0px 0px 13px black;
    }
    
    .profile {
        border-color: white;
        animation-name: flash_border;
        animation-duration: 3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        -webkit-animation-name: flash_border;
        -webkit-animation-duration: 3s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-name: flash_border;
        -moz-animation-duration: 3s;
        -moz-animation-timing-function: linear;
        -moz-animation-iteration-count: infinite;
    }
    
    main {
        background-color: transparent;
        color: white;
    }
    
    body {
        background-image: url(https://i.pinimg.com/originals/04/48/dc/0448dc083fadc27779df097197a50e68.gif);
        background-size: 330px;
    }
    
    a {
        color: #FF36EBC9;
    }
    
    a:hover {
        animation:blinkingText 1.5s infinite;
    }
    
     nav .top {
        background-color: #050308E3;
        height: 100px;
        background-size: 796px;
        background-position: center;
        border-radius: 5px;
        position: relative;
        border: 7px solid white;
        border-radius: 20px;
        box-shadow: 0px 0px 10px black;
        display: block;
    } 
    
    nav .top {
        border-color: white;
        animation-name: flash_border;
        animation-duration: 3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        -webkit-animation-name: flash_border;
        -webkit-animation-duration: 3s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-name: flash_border;
        -moz-animation-duration: 3s;
        -moz-animation-timing-function: linear;
        -moz-animation-iteration-count: infinite;
    }
    
    nav .links {
        background-color: transparent;
        text-align: center;
        margin-top: 9px;
        margin-bottom: 8px;
    }
    
    .profile-pic {
        border: 6px solid white;
        box-shadow: 0px 0px 7px black;
        border-radius: 30px;
        overflow: hidden;
    }
    
    .profile-pic {
        border-color: black;
        animation-name: flash_border;
        animation-duration: 3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        -webkit-animation-name: flash_border;
        -webkit-animation-duration: 3s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-name: flash_border;
        -moz-animation-duration: 3s;
        -moz-animation-timing-function: linear;
        -moz-animation-iteration-count: infinite;
    }
    
    .profile .contact,
    .profile .url-info,
    .profile .table-section,
    .home-actions {
        border-color: white;
        border-width: 5px;
        border-radius: 15px;
        overflow: hidden;
    }
    
    .profile .contact,
    .profile .url-info,
    .profile .table-section,
    .home-actions {
        border-color: black;
        animation-name: flash_border;
        animation-duration: 3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        -webkit-animation-name: flash_border;
        -webkit-animation-duration: 3s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-name: flash_border;
        -moz-animation-duration: 3s;
        -moz-animation-timing-function: linear;
        -moz-animation-iteration-count: infinite;
    }
    
    table.details-table td {
        background-color: #050308 !important;
        opacity: 100%;
        border-radius: 5px;
    }
    
    .heading {
        padding: 10px 0 !important;
        text-align: center;
        background-color: #050308 !important;
        border-radius: 10px;
    }
    
    .heading {
        animation:blinkingText 2.5s infinite;
    }
    
    table.comments-table td {
        background-color: #050308 !important;
        border: 1px #1b1b1c solid;
        box-shadow: 0px 0px 5px #1b1b1c;
        overflow
    }
    
    .comments-table td:first-child img {
        width: 90px;
        border-radius: 30px;
        border-style: solid;
        border-color: blue;
        border-width: 4.7px;
        box-shadow: 0px 0px 7px black;
        animation-name: flash_border;
        animation-duration: 3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        -webkit-animation-name: flash_border;
        -webkit-animation-duration: 3s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-name: flash_border;
        -moz-animation-duration: 3s;
        -moz-animation-timing-function: linear;
        -moz-animation-iteration-count: infinite;
    }
    
    .blog-preview p {
        font-size: 1.2rem;
    }
    
    .online {
        color: magenta;
        font-weight: bold;
        font-size: 80%;
    }
    
    .online img {
        content: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/63b9274d-71a3-402d-b125-4eb915a384cf/dff67nb-2db9c72e-197d-4e17-821d-faaf6233b809.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzYzYjkyNzRkLTcxYTMtNDAyZC1iMTI1LTRlYjkxNWEzODRjZlwvZGZmNjduYi0yZGI5YzcyZS0xOTdkLTRlMTctODIxZC1mYWFmNjIzM2I4MDkucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.qjBAtRuZt0Gf9s7xyDFn2__fUwnJPbz5DC3YfaKg1g8);
        height: 2.9em;
        margin-right: 5px;
        animation-name: blink;
        animation-iteration-count: infinite;
        animation-duration: 1s;
    }
    
    .icon, .award img {
        content: url(https://64.media.tumblr.com/8ae8319a3d8046d5dd677067489646db/tumblr_opweln0nCu1wndi59o1_250.gif);
        height: 26px;
        width: 23px;
    }
    
    .profile .blurbs .section h4 {
        margin: 0;
        color: white;
    }
    
    @keyframes blinkingText{
        0%{     color: #FF173B;    }
        12.5%{    color: #FF5B29; }
        37.5%{    color: #FFD12A; }
        50%{    color: #75FF2A; }
        62.5%{    color: #2AFF97; }
        75%{    color: #2AB8FF; }
        87.5%{    color: #5C2AFF; }
        100%{    color: #FF173B; }
    }
    
    .profile .friends .person img {
        border-radius: 30px;
        border-style: solid;
        border-color: white;
        border-width: 4.7px;
        box-shadow: 0px 0px 7px black;
        animation-name: flash_border;
        animation-duration: 3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        -webkit-animation-name: flash_border;
        -webkit-animation-duration: 3s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-name: flash_border;
        -moz-animation-duration: 3s;
        -moz-animation-timing-function: linear;
        -moz-animation-iteration-count: infinite;
    }


    .count {
        color: blueviolet;
        text-shadow: 0px 0px 6px;
        animation:blinkingText 0.3s infinite;
    }
    
    .profile-info {
        background-color: #050308;
        height: 100px
        width: 100px
        border: 7px solid;
        border-radius: 10px
        border-width: 6px
        box-shadow: 0px 0px 7px black;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 15px 5px;
        margin-bottom: 10px;
    }
    
    .profile-info {
        border-color: white;
        animation-name: flash_border;
        animation-duration: 3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        -webkit-animation-name: flash_border;
        -webkit-animation-duration: 3s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-name: flash_border;
        -moz-animation-duration: 3s;
        -moz-animation-timing-function: linear;
        -moz-animation-iteration-count: infinite;
    }
    
    .profile .friends .person p {
        color: blueviolet;
        text-shadow: 0px 0px e;
        font-weight: bold;
        width: 100%;
        word-break: break-word;
        font-size: 100%;
        text-align: center;
        animation:blinkingText 3.2s infinite;
    }
    
     footer {
        border-radius: 2px;
        background-color: #050308E3; !important
        display: block !important;
        position: relative;
        border: 3px solid white;
        border-width: 6.5px;
        border-radius: 20px;
        box-shadow: 0px 0px 10px black;
        display: block;
    }
    
    footer {
        border-color: black;
        animation-name: flash_border;
        animation-duration: 3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        -webkit-animation-name: flash_border;
        -webkit-animation-duration: 3s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-name: flash_border;
        -moz-animation-duration: 3s;
        -moz-animation-timing-function: linear;
        -moz-animation-iteration-count: infinite;
    }
    
@keyframes flash_border {
  0% {
    border-color: #FF173B;
  }
  12.5% {
    border-color: #FF5B29;
  }
  37.5% {
    border-color: #FFD12A;
  }
  50% {
    border-color: #75FF2A;
  }
  62.5% {
    border-color: #2AFF97;
  }
  75% {
    border-color: #2AB8FF;
  }
  87.5% {
    border-color: #5C2AFF;
  }
  100% {
    border-color: #FF173B;
  }
}

@-webkit-keyframes flash_border {
0% {
    border-color: red;
  }
  16% {
    border-color: orange;
  }
  32% {
    border-color: yellow;
  }
  48% {
    border-color: lime;
  }
  64% {
    border-color: blue;
  }
  80% {
    border-color: blueviolet;
  }
  96% {
    border-color: magenta;
  }
  100% {
    border-color: red;
  }
}

@-moz-keyframes flash_border {
  0% {
    border-color: red;
  }
  16% {
    border-color: orange;
  }
  32% {
    border-color: yellow;
  }
  48% {
    border-color: lime;
  }
  64% {
    border-color: blue;
  }
  80% {
    border-color: blueviolet;
  }
  96% {
    border-color: magenta;
  }
  100% {
    border-color: red;
  }
}

</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 175 comments ( View all | Add Comment )

Rosey	1743616747 using!! Report Comment
Rosey	1743616744 using!! Report Comment
Yamarouu_	1743512438 using <3 Report Comment
Julian <3	1742761935 Using :3 Report Comment
Astro !!	1742366469 Using! Report Comment
Roberto ~ !! (˘︶˘).｡*	1741601512 using ^_^ Report Comment
Ryn Dustings	1740142980 Cool! Using :3 Report Comment
Phizlle_pop	1739088540 Using! Report Comment
bekitekilz꩜	1738740146 using c: Report Comment
pinkuhhflower	1738602572 using:3 Report Comment
zoe !	1737927738 using!!! Report Comment
miles	1737483084 using Report Comment
Bready	1736807840 using!! :D Report Comment
ᗢ ARCHIE ⭑.ᐟ.ᐟ	1736686185 using!! ^_^ Report Comment
➤ 純真さはもうない	1736634407 using!! Report Comment
isa	1736626391 using! Report Comment
Agatthg	1736306001 Using Report Comment
KENZØ 🎀	1735897823 USING!! :3 Report Comment
T0AST XD	1735825114 Using!!! (I tried this out, and when reload, the eyestrain tw doesnt pop up for me, so im a bit worried i copy pasted the code wrong ( ;´ - `;)) Report Comment
kokichi oma!★	1735335119 using!! Report Comment