Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!

Дайте код префиксов.

Решение
css:
.rainbow-prefix {
    display: inline-block;
    padding: 3px 12px;
    font-weight: bold;
    border-radius: 12px;
    position: relative;
    z-index: 0;
    background: #1f1f1f;
    background-image: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3);
    background-size: 1800% 1800%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbowText 6s ease infinite
}

.rainbow-prefix::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: 12px;
    background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3);
    background-size...
Дек
199
58
Пользователь
css:
.userBanner {
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 60%;
    padding: 6px 12px;
    background-size: 400% 400% !important;
    animation: AnimBanner 10s ease infinite !important;
    position: relative;
    display: inline-flex;
    align-items: center;
    border-radius: 50px;
    margin: 2px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all .3s ease
}

.userBanner.userBanner--staff {
    color: white;
    background: linear-gradient(80deg, #f00, #ff8000, #ff0, #0f0, #0ff, #00f, #f0f);
    font-size: 60%;
    border-radius: 50px;
    text-align: center;
    padding: 6px 12px 3px;
    font-style: normal;
    border: none
}

.userBanner.cosmic {
    background: linear-gradient(270deg, #667eea, #764ba2, #f093fb, #f5576c);
    border: 1px solid rgba(255,255,255,0.3);
    animation: AnimBanner 6s ease infinite,glowPulse 3s ease-in-out infinite !important
}

.userBanner.nebula {
    background: linear-gradient(270deg, #ff6b6b, #ffa726, #66bb6a, #42a5f5, #ab47bc);
    animation: AnimBanner 7s ease infinite,glowPulse 3.5s ease-in-out infinite !important
}

.userBanner.galaxy {
    background: linear-gradient(270deg, #000428, #004e92, #2c3e50, #3498db);
    animation: AnimBanner 9s ease infinite,glowPulse 4s ease-in-out infinite !important
}

.userBanner.quantum {
    background: linear-gradient(270deg, #00b4db, #0083b0, #00f5a0, #00d9f5);
    animation: AnimBanner 5s ease infinite,glowPulse 2.5s ease-in-out infinite !important
}

.userBanner.cyber {
    background: linear-gradient(270deg, #ff0084, #33001b, #ff0084);
    border: 1px solid #ff0084;
    animation: AnimBanner 4s ease infinite,glowPulse 2s ease-in-out infinite !important
}

.userBanner.neon {
    background: linear-gradient(270deg, #00ff87, #60efff, #0061ff);
    color: #000;
    text-shadow: none;
    animation: AnimBanner 6s ease infinite,glowPulse 3s ease-in-out infinite !important
}

.userBanner.hologram {
    background: linear-gradient(270deg, #ff75c3, #ffa647, #ffe83f, #9fff5b, #70e2ff, #cd93ff);
    animation: AnimBanner 10s ease infinite,glowPulse 5s ease-in-out infinite !important
}

.userBanner.matrix {
    background: linear-gradient(270deg, #0f0, #0c0, #090, #060);
    color: #000;
    animation: AnimBanner 5s ease infinite,matrixGlow 2s ease-in-out infinite !important
}

.userBanner.aurora {
    background: linear-gradient(270deg, #ff7e5f, #feb47b, #86a8e7, #91eae4);
    animation: AnimBanner 8s ease infinite,glowPulse 4s ease-in-out infinite !important
}

.userBanner.ocean {
    background: linear-gradient(270deg, #2193b0, #6dd5ed, #6dd5fa, #2193b0);
    animation: AnimBanner 7s ease infinite,glowPulse 3.5s ease-in-out infinite !important
}

.userBanner.forest {
    background: linear-gradient(270deg, #56ab2f, #a8e6cf, #56ab2f, #2c7744);
    animation: AnimBanner 9s ease infinite,glowPulse 4s ease-in-out infinite !important
}

.userBanner.sunset {
    background: linear-gradient(270deg, #ff9a9e, #fad0c4, #fad0c4, #ff9a9e);
    animation: AnimBanner 6s ease infinite,glowPulse 3s ease-in-out infinite !important
}

.userBanner.gold {
    background: linear-gradient(270deg, #ffd700, #ffed4e, #ffd700, #daa520);
    color: #000;
    border: 1px solid #ffd700;
    animation: AnimBanner 5s ease infinite,goldPulse 2s ease-in-out infinite !important
}

.userBanner.platinum {
    background: linear-gradient(270deg, #e5e4e2, #b6b6b4, #e5e4e2, #8a8a88);
    color: #000;
    animation: AnimBanner 7s ease infinite,glowPulse 3s ease-in-out infinite !important
}

.userBanner.diamond {
    background: linear-gradient(270deg, #b9f2ff, #e6f7ff, #b9f2ff, #89cff0);
    color: #0066cc;
    animation: AnimBanner 8s ease infinite,diamondShine 3s ease-in-out infinite !important
}

.userBanner.crystal {
    background: linear-gradient(270deg, #ff6b6b, #ffa726, #66bb6a, #42a5f5);
    animation: AnimBanner 9s ease infinite,glowPulse 4s ease-in-out infinite !important
}

.userBanner.epic {
    background: linear-gradient(270deg, #8a2be2, #4b0082, #9400d3);
    animation: AnimBanner 6s ease infinite,epicGlow 2.5s ease-in-out infinite !important
}

.userBanner.legendary {
    background: linear-gradient(270deg, #ff8c00, #ff4500, #dc143c);
    animation: AnimBanner 4s ease infinite,legendaryFire 2s ease-in-out infinite !important
}

.userBanner.mythic {
    background: linear-gradient(270deg, #ff1493, #c71585, #8b008b);
    animation: AnimBanner 7s ease infinite,mythicPulse 3s ease-in-out infinite !important
}

.userBanner.heroic {
    background: linear-gradient(270deg, #1e90ff, #00bfff, #1e90ff);
    animation: AnimBanner 8s ease infinite,heroicGlow 4s ease-in-out infinite !important
}

.userBanner.spring {
    background: linear-gradient(270deg, #ff9a9e, #fad0c4, #fbc2eb, #a6c1ee);
    animation: AnimBanner 10s ease infinite,glowPulse 5s ease-in-out infinite !important
}

.userBanner.summer {
    background: linear-gradient(270deg, #ffecd2, #fcb69f, #ff9a8b);
    color: #000;
    animation: AnimBanner 7s ease infinite,summerGlow 3s ease-in-out infinite !important
}

.userBanner.autumn {
    background: linear-gradient(270deg, #ff9a62, #ff6b6b, #c56c86);
    animation: AnimBanner 8s ease infinite,autumnGlow 4s ease-in-out infinite !important
}

.userBanner.winter {
    background: linear-gradient(270deg, #a1c4fd, #c2e9fb, #a1c4fd);
    color: #2c3e50;
    animation: AnimBanner 9s ease infinite,winterSparkle 5s ease-in-out infinite !important
}

.userBanner.creator {
    background: linear-gradient(270deg, #f00, #ff8000, #ff0, #0f0, #0ff, #00f, #f0f);
    border: 2px solid rgba(255,255,255,0.5);
    font-size: 55%;
    animation: AnimBanner 12s ease infinite,rainbowGlow 6s ease-in-out infinite !important
}

.userBanner.moderator {
    background: linear-gradient(270deg, #4facfe, #00f2fe, #4facfe);
    animation: AnimBanner 8s ease infinite,glowPulse 4s ease-in-out infinite !important
}

.userBanner.administrator {
    background: linear-gradient(270deg, #f00, #ff6b6b, #f00);
    border: 1px solid #f00;
    animation: AnimBanner 5s ease infinite,adminPulse 2s ease-in-out infinite !important
}

.userBanner.developer {
    background: linear-gradient(270deg, #feea10, #ff931e, #df841a, #01a72c, #f819a7, #0859fc, #0045bb, #7b9de0, #80c3df, #008000, #32cd32, #da0, #c00);
    color: #000;
    animation: AnimBanner 6s ease infinite,matrixGlow 3s ease-in-out infinite !important
}

.userBanner.designer {
    background: linear-gradient(270deg, #ff6b6b, #ffa726, #ffeaa7);
    color: #000;
    animation: AnimBanner 8s ease infinite,glowPulse 4s ease-in-out infinite !important
}

.userBanner.supporter {
    background: linear-gradient(270deg, #fdbb2d, #22c1c3, #fdbb2d);
    animation: AnimBanner 7s ease infinite,glowPulse 3.5s ease-in-out infinite !important
}

.userBanner.vip {
    background: linear-gradient(270deg, #833ab4, #fd1d1d, #fcb045);
    border: 1px solid rgba(252,176,69,0.5);
    animation: AnimBanner 6s ease infinite,vipGlow 3s ease-in-out infinite !important
}

.userBanner.kawaii {
    background: linear-gradient(270deg, #ff9a9e, #fad0c4, #fbc2eb, #a6c1ee);
    border: 2px dotted rgba(255,255,255,0.5);
    animation: AnimBanner 9s ease infinite,kawaiiBounce 4s ease-in-out infinite !important
}

.userBanner.anime {
    background: linear-gradient(270deg, #ff6b6b, #ffa8a8, #ff6b6b, #ff8e8e);
    animation: AnimBanner 7s ease infinite,animePulse 3s ease-in-out infinite !important
}

.userBanner.retro {
    background: linear-gradient(270deg, #ffafbd, #ffc3a0, #ffafbd);
    color: #8b4513;
    animation: AnimBanner 8s ease infinite,retroGlow 4s ease-in-out infinite !important
}

.userBanner.vintage {
    background: linear-gradient(270deg, #d4af37, #c9a227, #d4af37);
    color: #8b4513;
    border: 1px solid #8b4513;
    animation: AnimBanner 10s ease infinite,vintageShine 5s ease-in-out infinite !important
}

.userBanner.future {
    background: linear-gradient(270deg, #0fc, #0cf, #0fc);
    color: #000;
    animation: AnimBanner 5s ease infinite,futureGlow 2s ease-in-out infinite !important
}

.userBanner.tech {
    background: linear-gradient(270deg, #667eea, #764ba2, #667eea);
    animation: AnimBanner 7s ease infinite,techPulse 3s ease-in-out infinite !important
}

.userBanner.magic {
    background: linear-gradient(270deg, #f0c, #33f, #f0c);
    animation: AnimBanner 6s ease infinite,magicSparkle 3s ease-in-out infinite !important
}

.userBanner.wizard {
    background: linear-gradient(270deg, #9d50bb, #6e48aa, #9d50bb);
    animation: AnimBanner 8s ease infinite,wizardGlow 4s ease-in-out infinite !important
}

.userBanner.enchanted {
    background: linear-gradient(270deg, #0f0, #080, #0f0);
    color: #000;
    animation: AnimBanner 7s ease infinite,enchantedGlow 3.5s ease-in-out infinite !important
}

.userBanner.champion {
    background: linear-gradient(270deg, #ffd700, #ffed4e, #ffd700);
    color: #000;
    border: 2px solid #daa520;
    animation: AnimBanner 4s ease infinite,championShine 2s ease-in-out infinite !important
}

.userBanner.innovator {
    background: linear-gradient(270deg, #0f8, #0cf, #0f8);
    color: #000;
    animation: AnimBanner 5s ease infinite,innovatorGlow 2.5s ease-in-out infinite !important
}

.userBanner.visionary {
    background: linear-gradient(270deg, #f0f, #0ff, #f0f);
    color: #000;
    animation: AnimBanner 6s ease infinite,visionaryPulse 3s ease-in-out infinite !important
}

.userBanner.minimal {
    background: linear-gradient(270deg, #667eea, #764ba2);
    font-size: 55%;
    padding: 4px 10px;
    animation: AnimBanner 10s ease infinite,minimalGlow 5s ease-in-out infinite !important
}

.userBanner.sleek {
    background: linear-gradient(270deg, #2c3e50, #3498db);
    font-size: 58%;
    animation: AnimBanner 12s ease infinite,sleekPulse 6s ease-in-out infinite !important
}

.userBanner.elegant {
    background: linear-gradient(270deg, #636363, #a2a2a2);
    font-size: 56%;
    animation: AnimBanner 15s ease infinite,elegantGlow 7s ease-in-out infinite !important
}

@keyframes AnimBanner {
    0% {
        background-position: 0% 50%;
        filter: brightness(1)
    }

    25% {
        background-position: 50% 75%
    }

    50% {
        background-position: 100% 50%;
        filter: brightness(1.1)
    }

    75% {
        background-position: 50% 25%
    }

    100% {
        background-position: 0% 50%;
        filter: brightness(1)
    }
}

@keyframes glowPulse {
    0%,100% {
        box-shadow: 0 2px 8px rgba(0,0,0,0.2)
    }

    50% {
        box-shadow: 0 4px 20px rgba(255,255,255,0.3),0 2px 8px rgba(0,0,0,0.3)
    }
}

@keyframes matrixGlow {
    0%,100% {
        box-shadow: 0 0 15px rgba(0,255,0,0.7),0 2px 8px rgba(0,0,0,0.2)
    }

    50% {
        box-shadow: 0 0 30px rgba(0,255,0,0.9),0 2px 8px rgba(0,0,0,0.3)
    }
}

@keyframes goldPulse {
    0%,100% {
        box-shadow: 0 0 20px rgba(255,215,0,0.8),0 2px 8px rgba(0,0,0,0.2)
    }

    50% {
        box-shadow: 0 0 35px #ffd700,0 2px 8px rgba(0,0,0,0.3)
    }
}

@keyframes diamondShine {
    0%,100% {
        box-shadow: 0 0 18px rgba(185,242,255,0.7),0 2px 8px rgba(0,0,0,0.2)
    }

    50% {
        box-shadow: 0 0 30px rgba(185,242,255,0.9),0 0 10px rgba(255,255,255,0.5),0 2px 8px rgba(0,0,0,0.3)
    }
}

@keyframes epicGlow {
    0%,100% {
        box-shadow: 0 0 15px rgba(138,43,226,0.7),0 2px 8px rgba(0,0,0,0.2)
    }

    50% {
        box-shadow: 0 0 25px rgba(138,43,226,0.9),0 2px 8px rgba(0,0,0,0.3)
    }
}

@keyframes legendaryFire {
    0%,100% {
        box-shadow: 0 0 18px rgba(255,140,0,0.8),0 2px 8px rgba(0,0,0,0.2)
    }

    50% {
        box-shadow: 0 0 30px #ff4500,0 2px 8px rgba(0,0,0,0.3)
    }
}

@keyframes rainbowGlow {
    0%,100% {
        box-shadow: 0 0 25px rgba(255,0,0,0.8),0 2px 8px rgba(0,0,0,0.2)
    }

    16% {
        box-shadow: 0 0 25px rgba(255,128,0,0.8),0 2px 8px rgba(0,0,0,0.2)
    }

    33% {
        box-shadow: 0 0 25px rgba(255,255,0,0.8),0 2px 8px rgba(0,0,0,0.2)
    }

    50% {
        box-shadow: 0 0 25px rgba(0,255,0,0.8),0 2px 8px rgba(0,0,0,0.2)
    }

    66% {
        box-shadow: 0 0 25px rgba(0,255,255,0.8),0 2px 8px rgba(0,0,0,0.2)
    }

    83% {
        box-shadow: 0 0 25px rgba(0,0,255,0.8),0 2px 8px rgba(0,0,0,0.2)
    }
}

@keyframes adminPulse {
    0%,100% {
        box-shadow: 0 0 20px rgba(255,0,0,0.8),0 2px 8px rgba(0,0,0,0.2)
    }

    50% {
        box-shadow: 0 0 35px #f00,0 2px 8px rgba(0,0,0,0.3)
    }
}

.userBanner.premium {
    animation: AnimBanner 6s ease infinite,goldPulse 2s ease-in-out infinite !important
}

.userBanner.animated {
    animation: AnimBanner 5s ease infinite,glowPulse 2s ease-in-out infinite !important;
    transition: all .3s ease
}

.userBanner.animated:hover {
    transform: scale(1.05);
    filter: brightness(1.2);
    animation-duration: 3s,1s !important
}

.userBanner.compact {
    font-size: 50%;
    padding: 4px 8px;
    max-width: 150px
}

.userBanner.tiny {
    font-size: 45%;
    padding: 3px 6px;
    max-width: 120px
}

.userBanner:hover {
    transform: scale(1.05);
    filter: brightness(1.15);
    animation-duration: 4s,2s !important;
    z-index: 10
}

@media (max-width: 768px) {
    .userBanner {
        font-size:55%;
        padding: 5px 10px;
        max-width: 180px;
        animation: AnimBanner 10s ease infinite,glowPulse 5s ease-in-out infinite !important
    }

    .userBanner.compact {
        max-width: 130px
    }

    .userBanner.tiny {
        max-width: 100px
    }
}
 
Дек
199
58
Пользователь
css:
.rainbow-prefix {
    display: inline-block;
    padding: 3px 12px;
    font-weight: bold;
    border-radius: 12px;
    position: relative;
    z-index: 0;
    background: #1f1f1f;
    background-image: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3);
    background-size: 1800% 1800%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbowText 6s ease infinite
}

.rainbow-prefix::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: 12px;
    background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3);
    background-size: 1800% 1800%;
    animation: rainbowBorder 6s ease infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1
}
@keyframes rainbowText {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

@keyframes rainbowBorder {
    0% {
        background-position: 100% 50%
    }

    50% {
        background-position: 0% 50%
    }

    100% {
        background-position: 100% 50%
    }
}
 
css:
.userBanner {
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 60%;
    padding: 6px 12px;
    background-size: 400% 400% !important;
    animation: AnimBanner 10s ease infinite !important;
    position: relative;
    display: inline-flex;
    align-items: center;
    border-radius: 50px;
    margin: 2px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all .3s ease
}

.userBanner.userBanner--staff {
    color: white;
    background: linear-gradient(80deg, #f00, #ff8000, #ff0, #0f0, #0ff, #00f, #f0f);
    font-size: 60%;
    border-radius: 50px;
    text-align: center;
    padding: 6px 12px 3px;
    font-style: normal;
    border: none
}

.userBanner.cosmic {
    background: linear-gradient(270deg, #667eea, #764ba2, #f093fb, #f5576c);
    border: 1px solid rgba(255,255,255,0.3);
    animation: AnimBanner 6s ease infinite,glowPulse 3s ease-in-out infinite !important
}

.userBanner.nebula {
    background: linear-gradient(270deg, #ff6b6b, #ffa726, #66bb6a, #42a5f5, #ab47bc);
    animation: AnimBanner 7s ease infinite,glowPulse 3.5s ease-in-out infinite !important
}

.userBanner.galaxy {
    background: linear-gradient(270deg, #000428, #004e92, #2c3e50, #3498db);
    animation: AnimBanner 9s ease infinite,glowPulse 4s ease-in-out infinite !important
}

.userBanner.quantum {
    background: linear-gradient(270deg, #00b4db, #0083b0, #00f5a0, #00d9f5);
    animation: AnimBanner 5s ease infinite,glowPulse 2.5s ease-in-out infinite !important
}

.userBanner.cyber {
    background: linear-gradient(270deg, #ff0084, #33001b, #ff0084);
    border: 1px solid #ff0084;
    animation: AnimBanner 4s ease infinite,glowPulse 2s ease-in-out infinite !important
}

.userBanner.neon {
    background: linear-gradient(270deg, #00ff87, #60efff, #0061ff);
    color: #000;
    text-shadow: none;
    animation: AnimBanner 6s ease infinite,glowPulse 3s ease-in-out infinite !important
}

.userBanner.hologram {
    background: linear-gradient(270deg, #ff75c3, #ffa647, #ffe83f, #9fff5b, #70e2ff, #cd93ff);
    animation: AnimBanner 10s ease infinite,glowPulse 5s ease-in-out infinite !important
}

.userBanner.matrix {
    background: linear-gradient(270deg, #0f0, #0c0, #090, #060);
    color: #000;
    animation: AnimBanner 5s ease infinite,matrixGlow 2s ease-in-out infinite !important
}

.userBanner.aurora {
    background: linear-gradient(270deg, #ff7e5f, #feb47b, #86a8e7, #91eae4);
    animation: AnimBanner 8s ease infinite,glowPulse 4s ease-in-out infinite !important
}

.userBanner.ocean {
    background: linear-gradient(270deg, #2193b0, #6dd5ed, #6dd5fa, #2193b0);
    animation: AnimBanner 7s ease infinite,glowPulse 3.5s ease-in-out infinite !important
}

.userBanner.forest {
    background: linear-gradient(270deg, #56ab2f, #a8e6cf, #56ab2f, #2c7744);
    animation: AnimBanner 9s ease infinite,glowPulse 4s ease-in-out infinite !important
}

.userBanner.sunset {
    background: linear-gradient(270deg, #ff9a9e, #fad0c4, #fad0c4, #ff9a9e);
    animation: AnimBanner 6s ease infinite,glowPulse 3s ease-in-out infinite !important
}

.userBanner.gold {
    background: linear-gradient(270deg, #ffd700, #ffed4e, #ffd700, #daa520);
    color: #000;
    border: 1px solid #ffd700;
    animation: AnimBanner 5s ease infinite,goldPulse 2s ease-in-out infinite !important
}

.userBanner.platinum {
    background: linear-gradient(270deg, #e5e4e2, #b6b6b4, #e5e4e2, #8a8a88);
    color: #000;
    animation: AnimBanner 7s ease infinite,glowPulse 3s ease-in-out infinite !important
}

.userBanner.diamond {
    background: linear-gradient(270deg, #b9f2ff, #e6f7ff, #b9f2ff, #89cff0);
    color: #0066cc;
    animation: AnimBanner 8s ease infinite,diamondShine 3s ease-in-out infinite !important
}

.userBanner.crystal {
    background: linear-gradient(270deg, #ff6b6b, #ffa726, #66bb6a, #42a5f5);
    animation: AnimBanner 9s ease infinite,glowPulse 4s ease-in-out infinite !important
}

.userBanner.epic {
    background: linear-gradient(270deg, #8a2be2, #4b0082, #9400d3);
    animation: AnimBanner 6s ease infinite,epicGlow 2.5s ease-in-out infinite !important
}

.userBanner.legendary {
    background: linear-gradient(270deg, #ff8c00, #ff4500, #dc143c);
    animation: AnimBanner 4s ease infinite,legendaryFire 2s ease-in-out infinite !important
}

.userBanner.mythic {
    background: linear-gradient(270deg, #ff1493, #c71585, #8b008b);
    animation: AnimBanner 7s ease infinite,mythicPulse 3s ease-in-out infinite !important
}

.userBanner.heroic {
    background: linear-gradient(270deg, #1e90ff, #00bfff, #1e90ff);
    animation: AnimBanner 8s ease infinite,heroicGlow 4s ease-in-out infinite !important
}

.userBanner.spring {
    background: linear-gradient(270deg, #ff9a9e, #fad0c4, #fbc2eb, #a6c1ee);
    animation: AnimBanner 10s ease infinite,glowPulse 5s ease-in-out infinite !important
}

.userBanner.summer {
    background: linear-gradient(270deg, #ffecd2, #fcb69f, #ff9a8b);
    color: #000;
    animation: AnimBanner 7s ease infinite,summerGlow 3s ease-in-out infinite !important
}

.userBanner.autumn {
    background: linear-gradient(270deg, #ff9a62, #ff6b6b, #c56c86);
    animation: AnimBanner 8s ease infinite,autumnGlow 4s ease-in-out infinite !important
}

.userBanner.winter {
    background: linear-gradient(270deg, #a1c4fd, #c2e9fb, #a1c4fd);
    color: #2c3e50;
    animation: AnimBanner 9s ease infinite,winterSparkle 5s ease-in-out infinite !important
}

.userBanner.creator {
    background: linear-gradient(270deg, #f00, #ff8000, #ff0, #0f0, #0ff, #00f, #f0f);
    border: 2px solid rgba(255,255,255,0.5);
    font-size: 55%;
    animation: AnimBanner 12s ease infinite,rainbowGlow 6s ease-in-out infinite !important
}

.userBanner.moderator {
    background: linear-gradient(270deg, #4facfe, #00f2fe, #4facfe);
    animation: AnimBanner 8s ease infinite,glowPulse 4s ease-in-out infinite !important
}

.userBanner.administrator {
    background: linear-gradient(270deg, #f00, #ff6b6b, #f00);
    border: 1px solid #f00;
    animation: AnimBanner 5s ease infinite,adminPulse 2s ease-in-out infinite !important
}

.userBanner.developer {
    background: linear-gradient(270deg, #feea10, #ff931e, #df841a, #01a72c, #f819a7, #0859fc, #0045bb, #7b9de0, #80c3df, #008000, #32cd32, #da0, #c00);
    color: #000;
    animation: AnimBanner 6s ease infinite,matrixGlow 3s ease-in-out infinite !important
}

.userBanner.designer {
    background: linear-gradient(270deg, #ff6b6b, #ffa726, #ffeaa7);
    color: #000;
    animation: AnimBanner 8s ease infinite,glowPulse 4s ease-in-out infinite !important
}

.userBanner.supporter {
    background: linear-gradient(270deg, #fdbb2d, #22c1c3, #fdbb2d);
    animation: AnimBanner 7s ease infinite,glowPulse 3.5s ease-in-out infinite !important
}

.userBanner.vip {
    background: linear-gradient(270deg, #833ab4, #fd1d1d, #fcb045);
    border: 1px solid rgba(252,176,69,0.5);
    animation: AnimBanner 6s ease infinite,vipGlow 3s ease-in-out infinite !important
}

.userBanner.kawaii {
    background: linear-gradient(270deg, #ff9a9e, #fad0c4, #fbc2eb, #a6c1ee);
    border: 2px dotted rgba(255,255,255,0.5);
    animation: AnimBanner 9s ease infinite,kawaiiBounce 4s ease-in-out infinite !important
}

.userBanner.anime {
    background: linear-gradient(270deg, #ff6b6b, #ffa8a8, #ff6b6b, #ff8e8e);
    animation: AnimBanner 7s ease infinite,animePulse 3s ease-in-out infinite !important
}

.userBanner.retro {
    background: linear-gradient(270deg, #ffafbd, #ffc3a0, #ffafbd);
    color: #8b4513;
    animation: AnimBanner 8s ease infinite,retroGlow 4s ease-in-out infinite !important
}

.userBanner.vintage {
    background: linear-gradient(270deg, #d4af37, #c9a227, #d4af37);
    color: #8b4513;
    border: 1px solid #8b4513;
    animation: AnimBanner 10s ease infinite,vintageShine 5s ease-in-out infinite !important
}

.userBanner.future {
    background: linear-gradient(270deg, #0fc, #0cf, #0fc);
    color: #000;
    animation: AnimBanner 5s ease infinite,futureGlow 2s ease-in-out infinite !important
}

.userBanner.tech {
    background: linear-gradient(270deg, #667eea, #764ba2, #667eea);
    animation: AnimBanner 7s ease infinite,techPulse 3s ease-in-out infinite !important
}

.userBanner.magic {
    background: linear-gradient(270deg, #f0c, #33f, #f0c);
    animation: AnimBanner 6s ease infinite,magicSparkle 3s ease-in-out infinite !important
}

.userBanner.wizard {
    background: linear-gradient(270deg, #9d50bb, #6e48aa, #9d50bb);
    animation: AnimBanner 8s ease infinite,wizardGlow 4s ease-in-out infinite !important
}

.userBanner.enchanted {
    background: linear-gradient(270deg, #0f0, #080, #0f0);
    color: #000;
    animation: AnimBanner 7s ease infinite,enchantedGlow 3.5s ease-in-out infinite !important
}

.userBanner.champion {
    background: linear-gradient(270deg, #ffd700, #ffed4e, #ffd700);
    color: #000;
    border: 2px solid #daa520;
    animation: AnimBanner 4s ease infinite,championShine 2s ease-in-out infinite !important
}

.userBanner.innovator {
    background: linear-gradient(270deg, #0f8, #0cf, #0f8);
    color: #000;
    animation: AnimBanner 5s ease infinite,innovatorGlow 2.5s ease-in-out infinite !important
}

.userBanner.visionary {
    background: linear-gradient(270deg, #f0f, #0ff, #f0f);
    color: #000;
    animation: AnimBanner 6s ease infinite,visionaryPulse 3s ease-in-out infinite !important
}

.userBanner.minimal {
    background: linear-gradient(270deg, #667eea, #764ba2);
    font-size: 55%;
    padding: 4px 10px;
    animation: AnimBanner 10s ease infinite,minimalGlow 5s ease-in-out infinite !important
}

.userBanner.sleek {
    background: linear-gradient(270deg, #2c3e50, #3498db);
    font-size: 58%;
    animation: AnimBanner 12s ease infinite,sleekPulse 6s ease-in-out infinite !important
}

.userBanner.elegant {
    background: linear-gradient(270deg, #636363, #a2a2a2);
    font-size: 56%;
    animation: AnimBanner 15s ease infinite,elegantGlow 7s ease-in-out infinite !important
}

@keyframes AnimBanner {
    0% {
        background-position: 0% 50%;
        filter: brightness(1)
    }

    25% {
        background-position: 50% 75%
    }

    50% {
        background-position: 100% 50%;
        filter: brightness(1.1)
    }

    75% {
        background-position: 50% 25%
    }

    100% {
        background-position: 0% 50%;
        filter: brightness(1)
    }
}

@keyframes glowPulse {
    0%,100% {
        box-shadow: 0 2px 8px rgba(0,0,0,0.2)
    }

    50% {
        box-shadow: 0 4px 20px rgba(255,255,255,0.3),0 2px 8px rgba(0,0,0,0.3)
    }
}

@keyframes matrixGlow {
    0%,100% {
        box-shadow: 0 0 15px rgba(0,255,0,0.7),0 2px 8px rgba(0,0,0,0.2)
    }

    50% {
        box-shadow: 0 0 30px rgba(0,255,0,0.9),0 2px 8px rgba(0,0,0,0.3)
    }
}

@keyframes goldPulse {
    0%,100% {
        box-shadow: 0 0 20px rgba(255,215,0,0.8),0 2px 8px rgba(0,0,0,0.2)
    }

    50% {
        box-shadow: 0 0 35px #ffd700,0 2px 8px rgba(0,0,0,0.3)
    }
}

@keyframes diamondShine {
    0%,100% {
        box-shadow: 0 0 18px rgba(185,242,255,0.7),0 2px 8px rgba(0,0,0,0.2)
    }

    50% {
        box-shadow: 0 0 30px rgba(185,242,255,0.9),0 0 10px rgba(255,255,255,0.5),0 2px 8px rgba(0,0,0,0.3)
    }
}

@keyframes epicGlow {
    0%,100% {
        box-shadow: 0 0 15px rgba(138,43,226,0.7),0 2px 8px rgba(0,0,0,0.2)
    }

    50% {
        box-shadow: 0 0 25px rgba(138,43,226,0.9),0 2px 8px rgba(0,0,0,0.3)
    }
}

@keyframes legendaryFire {
    0%,100% {
        box-shadow: 0 0 18px rgba(255,140,0,0.8),0 2px 8px rgba(0,0,0,0.2)
    }

    50% {
        box-shadow: 0 0 30px #ff4500,0 2px 8px rgba(0,0,0,0.3)
    }
}

@keyframes rainbowGlow {
    0%,100% {
        box-shadow: 0 0 25px rgba(255,0,0,0.8),0 2px 8px rgba(0,0,0,0.2)
    }

    16% {
        box-shadow: 0 0 25px rgba(255,128,0,0.8),0 2px 8px rgba(0,0,0,0.2)
    }

    33% {
        box-shadow: 0 0 25px rgba(255,255,0,0.8),0 2px 8px rgba(0,0,0,0.2)
    }

    50% {
        box-shadow: 0 0 25px rgba(0,255,0,0.8),0 2px 8px rgba(0,0,0,0.2)
    }

    66% {
        box-shadow: 0 0 25px rgba(0,255,255,0.8),0 2px 8px rgba(0,0,0,0.2)
    }

    83% {
        box-shadow: 0 0 25px rgba(0,0,255,0.8),0 2px 8px rgba(0,0,0,0.2)
    }
}

@keyframes adminPulse {
    0%,100% {
        box-shadow: 0 0 20px rgba(255,0,0,0.8),0 2px 8px rgba(0,0,0,0.2)
    }

    50% {
        box-shadow: 0 0 35px #f00,0 2px 8px rgba(0,0,0,0.3)
    }
}

.userBanner.premium {
    animation: AnimBanner 6s ease infinite,goldPulse 2s ease-in-out infinite !important
}

.userBanner.animated {
    animation: AnimBanner 5s ease infinite,glowPulse 2s ease-in-out infinite !important;
    transition: all .3s ease
}

.userBanner.animated:hover {
    transform: scale(1.05);
    filter: brightness(1.2);
    animation-duration: 3s,1s !important
}

.userBanner.compact {
    font-size: 50%;
    padding: 4px 8px;
    max-width: 150px
}

.userBanner.tiny {
    font-size: 45%;
    padding: 3px 6px;
    max-width: 120px
}

.userBanner:hover {
    transform: scale(1.05);
    filter: brightness(1.15);
    animation-duration: 4s,2s !important;
    z-index: 10
}

@media (max-width: 768px) {
    .userBanner {
        font-size:55%;
        padding: 5px 10px;
        max-width: 180px;
        animation: AnimBanner 10s ease infinite,glowPulse 5s ease-in-out infinite !important
    }

    .userBanner.compact {
        max-width: 130px
    }

    .userBanner.tiny {
        max-width: 100px
    }
}
Баннеры то я знал, т, к я из еще сливал давно и они брали 100% мой код, а префиксы хз где взяли они
 
css:
.rainbow-prefix {
    display: inline-block;
    padding: 3px 12px;
    font-weight: bold;
    border-radius: 12px;
    position: relative;
    z-index: 0;
    background: #1f1f1f;
    background-image: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3);
    background-size: 1800% 1800%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbowText 6s ease infinite
}

.rainbow-prefix::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: 12px;
    background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3);
    background-size: 1800% 1800%;
    animation: rainbowBorder 6s ease infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1
}
Щас проверю
 
Сверху