How To Create Premium VIP Effects For Init Manga

1 week 0 1 11 min read

One of the best ways to make a manga website feel more modern and visually impressive is by adding exclusive effects for VIP members. Instead of only changing nickname colors or adding a simple badge, many websites now use glassmorphism, animated lighting and premium gradients to create a much stronger “premium” feeling for comments, reviews and chatbox messages.

How To Create Premium VIP Effects For Init Manga

Table of Contents

Liquid Glass VIP Style
Aurora VIP Style
Neon Cyber VIP Style
Royal Gold VIP Style
Important Notes When Customizing VIP CSS In Init Manga
Final Thoughts

In this tutorial, we will upgrade the VIP interface in Init Manga using several different styles such as Liquid Glass, Aurora, Neon Cyber and Royal Gold. Each style is optimized to work smoothly with the comment system and chatbox components of Init Manga.

Liquid Glass VIP Style

Liquid Glass is a modern design style featuring frosted glass effects, layered reflections and soft background blur. This type of UI design has become extremely popular because it creates a cleaner, softer and more luxurious appearance compared to traditional CSS styling.

This style works especially well for:

Modern manga websites
Light mode and dark mode interfaces
VIP donation systems
Highly active chatbox communities

<style>
.iue-vip-badge {
    background: linear-gradient(90deg, #f39c12, #e91e63, #9c27b0);
    background-size: 200% 200%;
    animation: iueVipGradient 3s ease infinite;
    box-shadow: 0 0 6px rgb(0 0 0 / 0.2);
    font-weight: 600;
    transition: transform 0.3s ease;
}
@keyframes iueVipGradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
.init-chatbox-message-body.is-vip,
.init-chatbox-message.current-user .init-chatbox-message-body.is-vip,
.uk-comment-primary.is-vip,
.recent-comment-content.is-vip,
.recent-review-content.is-vip {
    position: relative;
    background: rgb(255 255 255 / 0.35);
    border: 1px solid rgb(255 255 255 / 0.22);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 4px 14px rgb(0 0 0 / 0.08),
        inset 0 1px 12px rgb(255 255 255 / 0.18);
    color: #666;
    overflow: hidden;
}
.init-chatbox-message.current-user .init-chatbox-message-body.is-vip a {
    color: var(--im-theme-color);
}
.init-chatbox-message-body.is-vip::before,
.uk-comment-primary.is-vip::before,
.recent-comment-content.is-vip::before,
.recent-review-content.is-vip::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
            1200px 600px at -10% -10%,
            rgb(255 255 255 / 0.45),
            transparent 55%
        ),
        radial-gradient(
            1200px 600px at 110% 110%,
            rgb(255 255 255 / 0.25),
            transparent 55%
        ),
        radial-gradient(
            80% 160% at 50% 120%,
            rgb(0 0 0 / 0.06),
            transparent 60%
        );
    mix-blend-mode: soft-light;
    z-index: -1;
}
.init-chatbox-message-body.is-vip::after,
.uk-comment-primary.is-vip::after,
.recent-comment-content.is-vip::after,
.recent-review-content.is-vip::after {
    content: "";
    position: absolute;
    inset: -10%;
    pointer-events: none;
    background: radial-gradient(
            180px 160px at 20% 30%,
            rgb(135 206 250 / 0.22),
            transparent 60%
        ),
        radial-gradient(
            220px 200px at 75% 35%,
            rgb(255 182 193 / 0.2),
            transparent 65%
        ),
        radial-gradient(
            260px 220px at 40% 80%,
            rgb(144 238 144 / 0.18),
            transparent 65%
        ),
        radial-gradient(
            160px 140px at 85% 85%,
            rgb(255 255 255 / 0.25),
            transparent 60%
        );
    filter: blur(2px);
    background-size: 100% 100%;
    opacity: 0.9;
    z-index: -1;
}
.uk-light.is-vip,
.uk-light .init-chatbox-message-body.is-vip,
.uk-light .init-chatbox-message.current-user .init-chatbox-message-body.is-vip,
.uk-light .uk-comment-primary.is-vip,
.uk-light .recent-comment-content.is-vip,
.uk-light .recent-review-content.is-vip {
    background: rgb(22 22 24 / 0.45);
    border-color: rgb(255 255 255 / 0.1);
    box-shadow: 0 3px 15px rgb(0 0 0 / 0.15),
        inset 0 1px 10px rgb(255 255 255 / 0.06);
    color: rgb(255 255 255 / 0.7);
}
.uk-light .init-chatbox-message-body.is-vip::after,
.uk-light .uk-comment-primary.is-vip::after,
.uk-light .recent-comment-content.is-vip::after,
.uk-light .recent-review-content.is-vip::after {
    background: radial-gradient(
            200px 180px at 20% 30%,
            rgb(135 206 250 / 0.18),
            transparent 60%
        ),
        radial-gradient(
            240px 220px at 75% 35%,
            rgb(186 85 211 / 0.16),
            transparent 65%
        ),
        radial-gradient(
            280px 240px at 40% 80%,
            rgb(100 149 237 / 0.14),
            transparent 65%
        ),
        radial-gradient(
            180px 160px at 85% 85%,
            rgb(255 255 255 / 0.12),
            transparent 60%
        );
    opacity: 0.75;
}
</style>

Aurora VIP Style

Aurora VIP Style uses smooth animated gradients to create a soft aurora lighting effect. When combined with dark mode, VIP comment containers gain impressive depth and a more immersive visual appearance.

Main highlights of the Aurora style:

Smooth animated gradients
Fantasy-inspired lighting effects
Perfect for anime and fantasy manga themes
Excellent readability even on dark backgrounds

<style>
.iue-vip-badge {
    background: linear-gradient(
        135deg,
        #00c2ff,
        #4facfe,
        #7b61ff,
        #00e5ff
    );
    background-size: 300% 300%;
    animation: iueAuroraGradient 6s ease infinite;
    box-shadow:
        0 0 10px rgb(79 172 254 / 0.25),
        0 0 18px rgb(123 97 255 / 0.18),
        inset 0 1px 2px rgb(255 255 255 / 0.18);
    color: #fff;
    font-weight: 600;
    border: 1px solid rgb(255 255 255 / 0.12);
    overflow: hidden;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.iue-vip-badge:hover {
    transform: translateY(-1px);
    box-shadow:
        0 0 14px rgb(79 172 254 / 0.32),
        0 0 24px rgb(123 97 255 / 0.24),
        inset 0 1px 3px rgb(255 255 255 / 0.22);
}

.iue-vip-badge::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            120deg,
            transparent 20%,
            rgb(255 255 255 / 0.18),
            transparent 80%
        );
    transform: translateX(-120%);
    animation: iueAuroraShine 5s linear infinite;
}

.iue-vip-badge::after {
    content: "";
    position: absolute;
    inset: -40%;
    pointer-events: none;
    background:
        radial-gradient(
            circle at 20% 30%,
            rgb(0 229 255 / 0.18),
            transparent 40%
        ),
        radial-gradient(
            circle at 80% 70%,
            rgb(123 97 255 / 0.18),
            transparent 45%
        );
    filter: blur(10px);
    opacity: 0.8;
}

@keyframes iueAuroraGradient {
    0% {
        background-position: 0% 50%;
    }

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

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

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

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

@keyframes iueAuroraShine {
    100% {
        transform: translateX(120%);
    }
}

.init-chatbox-message-body.is-vip,
.init-chatbox-message.current-user .init-chatbox-message-body.is-vip,
.uk-comment-primary.is-vip,
.recent-comment-content.is-vip,
.recent-review-content.is-vip {
    position: relative;
    background:
        linear-gradient(
            145deg,
            rgb(255 255 255 / 0.3),
            rgb(255 255 255 / 0.12)
        );
    border: 1px solid rgb(255 255 255 / 0.16);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    box-shadow:
        0 8px 30px rgb(0 0 0 / 0.08),
        inset 0 1px 10px rgb(255 255 255 / 0.14),
        inset 0 -1px 8px rgb(255 255 255 / 0.04);
    color: #666;
    overflow: hidden;
    isolation: isolate;
}

.init-chatbox-message.current-user .init-chatbox-message-body.is-vip a {
    color: var(--im-theme-color);
}

.init-chatbox-message-body.is-vip::before,
.uk-comment-primary.is-vip::before,
.recent-comment-content.is-vip::before,
.recent-review-content.is-vip::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(
            1200px 600px at -10% -10%,
            rgb(255 255 255 / 0.35),
            transparent 55%
        ),
        radial-gradient(
            1200px 600px at 110% 110%,
            rgb(255 255 255 / 0.18),
            transparent 55%
        ),
        radial-gradient(
            80% 180% at 50% 120%,
            rgb(0 0 0 / 0.08),
            transparent 65%
        ),
        linear-gradient(
            180deg,
            rgb(255 255 255 / 0.06),
            transparent 30%
        );
    mix-blend-mode: soft-light;
    z-index: -2;
}

.init-chatbox-message-body.is-vip::after,
.uk-comment-primary.is-vip::after,
.recent-comment-content.is-vip::after,
.recent-review-content.is-vip::after {
    content: "";
    position: absolute;
    inset: -15%;
    pointer-events: none;
    background:
        radial-gradient(
            260px 220px at 15% 25%,
            rgb(0 229 255 / 0.18),
            transparent 60%
        ),
        radial-gradient(
            320px 280px at 85% 20%,
            rgb(123 97 255 / 0.16),
            transparent 65%
        ),
        radial-gradient(
            300px 260px at 40% 85%,
            rgb(79 172 254 / 0.16),
            transparent 65%
        ),
        radial-gradient(
            240px 200px at 90% 90%,
            rgb(255 255 255 / 0.14),
            transparent 60%
        ),
        radial-gradient(
            180px 160px at 55% 45%,
            rgb(0 194 255 / 0.12),
            transparent 65%
        );
    filter: blur(4px);
    opacity: 0.95;
    z-index: -1;
    animation: iueAuroraFlow 12s ease-in-out infinite alternate;
}

@keyframes iueAuroraFlow {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(-2%, -1%, 0) scale(1.03);
    }

    100% {
        transform: translate3d(2%, 1%, 0) scale(1.05);
    }
}

.uk-light.is-vip,
.uk-light .init-chatbox-message-body.is-vip,
.uk-light .init-chatbox-message.current-user .init-chatbox-message-body.is-vip,
.uk-light .uk-comment-primary.is-vip,
.uk-light .recent-comment-content.is-vip,
.uk-light .recent-review-content.is-vip {
    background:
        linear-gradient(
            145deg,
            rgb(15 18 35 / 0.55),
            rgb(18 24 42 / 0.42)
        );
    border-color: rgb(255 255 255 / 0.08);
    box-shadow:
        0 10px 32px rgb(0 0 0 / 0.18),
        inset 0 1px 10px rgb(255 255 255 / 0.04),
        inset 0 -1px 8px rgb(255 255 255 / 0.02);
    color: rgb(255 255 255 / 0.72);
}

.uk-light .init-chatbox-message.current-user .init-chatbox-message-body.is-vip a {
    color: rgb(130 220 255);
}

.uk-light .init-chatbox-message-body.is-vip::before,
.uk-light .uk-comment-primary.is-vip::before,
.uk-light .recent-comment-content.is-vip::before,
.uk-light .recent-review-content.is-vip::before {
    background:
        radial-gradient(
            1200px 600px at -10% -10%,
            rgb(255 255 255 / 0.08),
            transparent 55%
        ),
        radial-gradient(
            1200px 600px at 110% 110%,
            rgb(255 255 255 / 0.04),
            transparent 55%
        ),
        radial-gradient(
            80% 180% at 50% 120%,
            rgb(0 0 0 / 0.18),
            transparent 65%
        ),
        linear-gradient(
            180deg,
            rgb(255 255 255 / 0.03),
            transparent 30%
        );
}

.uk-light .init-chatbox-message-body.is-vip::after,
.uk-light .uk-comment-primary.is-vip::after,
.uk-light .recent-comment-content.is-vip::after,
.uk-light .recent-review-content.is-vip::after {
    background:
        radial-gradient(
            280px 240px at 15% 25%,
            rgb(0 229 255 / 0.14),
            transparent 60%
        ),
        radial-gradient(
            340px 300px at 85% 20%,
            rgb(123 97 255 / 0.14),
            transparent 65%
        ),
        radial-gradient(
            320px 280px at 40% 85%,
            rgb(79 172 254 / 0.12),
            transparent 65%
        ),
        radial-gradient(
            260px 220px at 90% 90%,
            rgb(255 255 255 / 0.06),
            transparent 60%
        ),
        radial-gradient(
            200px 180px at 55% 45%,
            rgb(0 194 255 / 0.08),
            transparent 65%
        );
    opacity: 0.78;
}
</style>

Neon Cyber VIP Style

If your website uses a cyberpunk or sci-fi aesthetic, Neon Cyber is an excellent choice. The neon glow effects make VIP comments instantly stand out, especially during nighttime browsing or when using dark mode themes.

Neon Cyber is commonly used for:

Action manga websites
Cyberpunk themes
Sci-fi inspired interfaces
Multi-tier VIP systems

<style>
.iue-vip-badge {
    background:
        linear-gradient(
            135deg,
            #00f5ff,
            #00b7ff,
            #8b5cf6,
            #ff00ff
        );
    background-size: 300% 300%;
    animation: iueCyberGradient 5s ease infinite;
    border: 1px solid rgb(255 255 255 / 0.14);
    color: #fff;
    font-weight: 700;
    text-shadow:
        0 0 4px rgb(255 255 255 / 0.3),
        0 0 10px rgb(0 245 255 / 0.45);
    box-shadow:
        0 0 10px rgb(0 245 255 / 0.35),
        0 0 22px rgb(139 92 246 / 0.2),
        inset 0 1px 2px rgb(255 255 255 / 0.18);
    overflow: hidden;
    isolation: isolate;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.iue-vip-badge:hover {
    transform: translateY(-1px);
    box-shadow:
        0 0 14px rgb(0 245 255 / 0.45),
        0 0 28px rgb(255 0 255 / 0.28),
        inset 0 1px 3px rgb(255 255 255 / 0.24);
}

.iue-vip-badge::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            120deg,
            transparent 20%,
            rgb(255 255 255 / 0.22),
            transparent 80%
        );
    transform: translateX(-140%);
    animation: iueCyberShine 4s linear infinite;
}

.iue-vip-badge::after {
    content: "";
    position: absolute;
    inset: -35%;
    pointer-events: none;
    background:
        radial-gradient(
            circle at 20% 30%,
            rgb(0 245 255 / 0.25),
            transparent 42%
        ),
        radial-gradient(
            circle at 80% 70%,
            rgb(255 0 255 / 0.22),
            transparent 46%
        );
    filter: blur(10px);
    opacity: 0.85;
    z-index: -1;
}

@keyframes iueCyberGradient {
    0% {
        background-position: 0% 50%;
    }

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

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

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

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

@keyframes iueCyberShine {
    100% {
        transform: translateX(140%);
    }
}

.init-chatbox-message-body.is-vip,
.init-chatbox-message.current-user .init-chatbox-message-body.is-vip,
.uk-comment-primary.is-vip,
.recent-comment-content.is-vip,
.recent-review-content.is-vip {
    position: relative;
    background:
        linear-gradient(
            145deg,
            rgb(8 10 22 / 0.92),
            rgb(14 18 32 / 0.82)
        );
    border: 1px solid rgb(0 245 255 / 0.12);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    box-shadow:
        0 0 12px rgb(0 245 255 / 0.08),
        0 0 24px rgb(139 92 246 / 0.08),
        inset 0 1px 8px rgb(255 255 255 / 0.04),
        inset 0 -1px 6px rgb(255 255 255 / 0.02);
    color: rgb(255 255 255 / 0.76);
    overflow: hidden;
    isolation: isolate;
}

.init-chatbox-message.current-user .init-chatbox-message-body.is-vip a {
    color: rgb(90 220 255);
}

.init-chatbox-message-body.is-vip::before,
.uk-comment-primary.is-vip::before,
.recent-comment-content.is-vip::before,
.recent-review-content.is-vip::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            135deg,
            rgb(0 245 255 / 0.06),
            transparent 30%,
            transparent 70%,
            rgb(255 0 255 / 0.06)
        ),
        linear-gradient(
            180deg,
            rgb(255 255 255 / 0.03),
            transparent 25%
        ),
        repeating-linear-gradient(
            180deg,
            rgb(255 255 255 / 0.015) 0px,
            rgb(255 255 255 / 0.015) 1px,
            transparent 1px,
            transparent 3px
        );
    mix-blend-mode: screen;
    z-index: -2;
}

.init-chatbox-message-body.is-vip::after,
.uk-comment-primary.is-vip::after,
.recent-comment-content.is-vip::after,
.recent-review-content.is-vip::after {
    content: "";
    position: absolute;
    inset: -20%;
    pointer-events: none;
    background:
        radial-gradient(
            280px 240px at 15% 20%,
            rgb(0 245 255 / 0.18),
            transparent 60%
        ),
        radial-gradient(
            320px 280px at 85% 25%,
            rgb(255 0 255 / 0.16),
            transparent 65%
        ),
        radial-gradient(
            340px 300px at 40% 85%,
            rgb(139 92 246 / 0.14),
            transparent 65%
        ),
        radial-gradient(
            220px 200px at 90% 90%,
            rgb(255 255 255 / 0.08),
            transparent 60%
        ),
        linear-gradient(
            120deg,
            transparent 20%,
            rgb(0 245 255 / 0.04),
            transparent 80%
        );
    filter: blur(8px);
    opacity: 0.95;
    z-index: -1;
    animation: iueCyberFlow 10s ease-in-out infinite alternate;
}

@keyframes iueCyberFlow {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(-1.5%, 1%, 0) scale(1.03);
    }

    100% {
        transform: translate3d(1.5%, -1%, 0) scale(1.05);
    }
}

.uk-light.is-vip,
.uk-light .init-chatbox-message-body.is-vip,
.uk-light .init-chatbox-message.current-user .init-chatbox-message-body.is-vip,
.uk-light .uk-comment-primary.is-vip,
.uk-light .recent-comment-content.is-vip,
.uk-light .recent-review-content.is-vip {
    background:
        linear-gradient(
            145deg,
            rgb(12 14 26 / 0.88),
            rgb(18 22 36 / 0.78)
        );
    border-color: rgb(0 245 255 / 0.1);
    box-shadow:
        0 0 14px rgb(0 245 255 / 0.1),
        0 0 26px rgb(139 92 246 / 0.08),
        inset 0 1px 8px rgb(255 255 255 / 0.03),
        inset 0 -1px 6px rgb(255 255 255 / 0.015);
    color: rgb(255 255 255 / 0.72);
}

.uk-light .init-chatbox-message.current-user .init-chatbox-message-body.is-vip a {
    color: rgb(100 225 255);
}

.uk-light .init-chatbox-message-body.is-vip::before,
.uk-light .uk-comment-primary.is-vip::before,
.uk-light .recent-comment-content.is-vip::before,
.uk-light .recent-review-content.is-vip::before {
    background:
        linear-gradient(
            135deg,
            rgb(0 245 255 / 0.05),
            transparent 30%,
            transparent 70%,
            rgb(255 0 255 / 0.05)
        ),
        linear-gradient(
            180deg,
            rgb(255 255 255 / 0.02),
            transparent 25%
        ),
        repeating-linear-gradient(
            180deg,
            rgb(255 255 255 / 0.01) 0px,
            rgb(255 255 255 / 0.01) 1px,
            transparent 1px,
            transparent 3px
        );
}

.uk-light .init-chatbox-message-body.is-vip::after,
.uk-light .uk-comment-primary.is-vip::after,
.uk-light .recent-comment-content.is-vip::after,
.uk-light .recent-review-content.is-vip::after {
    background:
        radial-gradient(
            300px 260px at 15% 20%,
            rgb(0 245 255 / 0.14),
            transparent 60%
        ),
        radial-gradient(
            340px 300px at 85% 25%,
            rgb(255 0 255 / 0.12),
            transparent 65%
        ),
        radial-gradient(
            360px 320px at 40% 85%,
            rgb(139 92 246 / 0.1),
            transparent 65%
        ),
        radial-gradient(
            240px 220px at 90% 90%,
            rgb(255 255 255 / 0.04),
            transparent 60%
        ),
        linear-gradient(
            120deg,
            transparent 20%,
            rgb(0 245 255 / 0.03),
            transparent 80%
        );
    opacity: 0.82;
}
</style>

Royal Gold VIP Style

Royal Gold focuses on luxury styling using royal golden tones and subtle metallic lighting effects. This type of CSS design is especially suitable for websites with supporter systems or premium membership features.

Advantages of the Royal Gold style:

Creates a strong premium feeling
Easy to combine with light-themed layouts
Luxurious colors without becoming too aggressive
Visually striking while remaining elegant

<style>
.iue-vip-badge {
    background:
        linear-gradient(
            135deg,
            #fff3b0,
            #ffd86b,
            #ffbf3f,
            #ffe8a3
        );
    background-size: 300% 300%;
    animation: iueRoyalGoldGradient 6s ease infinite;
    border: 1px solid rgb(255 240 180 / 0.35);
    color: #6b4300;
    font-weight: 700;
    text-shadow:
        0 1px 1px rgb(255 255 255 / 0.35),
        0 0 6px rgb(255 215 0 / 0.2);
    box-shadow:
        0 0 10px rgb(255 191 63 / 0.22),
        0 0 24px rgb(255 215 0 / 0.16),
        inset 0 1px 3px rgb(255 255 255 / 0.45),
        inset 0 -1px 2px rgb(180 120 0 / 0.08);
    overflow: hidden;
    isolation: isolate;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.iue-vip-badge:hover {
    transform: translateY(-1px);
    box-shadow:
        0 0 14px rgb(255 191 63 / 0.3),
        0 0 28px rgb(255 215 0 / 0.22),
        inset 0 1px 4px rgb(255 255 255 / 0.5),
        inset 0 -1px 3px rgb(180 120 0 / 0.12);
}

.iue-vip-badge::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            120deg,
            transparent 20%,
            rgb(255 255 255 / 0.38),
            transparent 80%
        );
    transform: translateX(-140%);
    animation: iueRoyalGoldShine 5s linear infinite;
}

.iue-vip-badge::after {
    content: "";
    position: absolute;
    inset: -35%;
    pointer-events: none;
    background:
        radial-gradient(
            circle at 20% 30%,
            rgb(255 255 255 / 0.35),
            transparent 40%
        ),
        radial-gradient(
            circle at 80% 70%,
            rgb(255 215 0 / 0.24),
            transparent 45%
        ),
        radial-gradient(
            circle at 50% 100%,
            rgb(255 191 63 / 0.18),
            transparent 48%
        );
    filter: blur(10px);
    opacity: 0.9;
    z-index: -1;
}

@keyframes iueRoyalGoldGradient {
    0% {
        background-position: 0% 50%;
    }

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

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

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

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

@keyframes iueRoyalGoldShine {
    100% {
        transform: translateX(140%);
    }
}

.init-chatbox-message-body.is-vip,
.init-chatbox-message.current-user .init-chatbox-message-body.is-vip,
.uk-comment-primary.is-vip,
.recent-comment-content.is-vip,
.recent-review-content.is-vip {
    position: relative;
    background:
        linear-gradient(
            145deg,
            rgb(255 249 229 / 0.92),
            rgb(255 241 196 / 0.82)
        );
    border: 1px solid rgb(255 215 0 / 0.16);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    box-shadow:
        0 6px 20px rgb(255 193 7 / 0.08),
        0 0 26px rgb(255 215 0 / 0.06),
        inset 0 1px 10px rgb(255 255 255 / 0.4),
        inset 0 -1px 8px rgb(180 120 0 / 0.04);
    color: #7a5200;
    overflow: hidden;
    isolation: isolate;
}

.init-chatbox-message.current-user .init-chatbox-message-body.is-vip a {
    color: #c27b00;
}

.init-chatbox-message-body.is-vip::before,
.uk-comment-primary.is-vip::before,
.recent-comment-content.is-vip::before,
.recent-review-content.is-vip::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(
            1200px 600px at -10% -10%,
            rgb(255 255 255 / 0.42),
            transparent 55%
        ),
        radial-gradient(
            1200px 600px at 110% 110%,
            rgb(255 255 255 / 0.2),
            transparent 55%
        ),
        radial-gradient(
            80% 180% at 50% 120%,
            rgb(180 120 0 / 0.06),
            transparent 65%
        ),
        linear-gradient(
            180deg,
            rgb(255 255 255 / 0.08),
            transparent 30%
        );
    mix-blend-mode: soft-light;
    z-index: -2;
}

.init-chatbox-message-body.is-vip::after,
.uk-comment-primary.is-vip::after,
.recent-comment-content.is-vip::after,
.recent-review-content.is-vip::after {
    content: "";
    position: absolute;
    inset: -18%;
    pointer-events: none;
    background:
        radial-gradient(
            260px 220px at 15% 25%,
            rgb(255 255 255 / 0.3),
            transparent 60%
        ),
        radial-gradient(
            320px 280px at 85% 20%,
            rgb(255 215 0 / 0.18),
            transparent 65%
        ),
        radial-gradient(
            340px 300px at 40% 85%,
            rgb(255 191 63 / 0.16),
            transparent 65%
        ),
        radial-gradient(
            240px 220px at 90% 90%,
            rgb(255 255 255 / 0.16),
            transparent 60%
        ),
        radial-gradient(
            180px 160px at 55% 45%,
            rgb(255 224 130 / 0.14),
            transparent 65%
        );
    filter: blur(6px);
    opacity: 0.95;
    z-index: -1;
    animation: iueRoyalGoldFlow 12s ease-in-out infinite alternate;
}

@keyframes iueRoyalGoldFlow {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(-1.5%, 1%, 0) scale(1.03);
    }

    100% {
        transform: translate3d(1.5%, -1%, 0) scale(1.05);
    }
}

.uk-light.is-vip,
.uk-light .init-chatbox-message-body.is-vip,
.uk-light .init-chatbox-message.current-user .init-chatbox-message-body.is-vip,
.uk-light .uk-comment-primary.is-vip,
.uk-light .recent-comment-content.is-vip,
.uk-light .recent-review-content.is-vip {
    background:
        linear-gradient(
            145deg,
            rgb(44 32 12 / 0.72),
            rgb(60 42 14 / 0.62)
        );
    border-color: rgb(255 215 0 / 0.1);
    box-shadow:
        0 8px 22px rgb(0 0 0 / 0.16),
        0 0 28px rgb(255 215 0 / 0.08),
        inset 0 1px 8px rgb(255 255 255 / 0.04),
        inset 0 -1px 6px rgb(255 255 255 / 0.02);
    color: rgb(255 235 180 / 0.76);
}

.uk-light .init-chatbox-message.current-user .init-chatbox-message-body.is-vip a {
    color: rgb(255 210 90);
}

.uk-light .init-chatbox-message-body.is-vip::before,
.uk-light .uk-comment-primary.is-vip::before,
.uk-light .recent-comment-content.is-vip::before,
.uk-light .recent-review-content.is-vip::before {
    background:
        radial-gradient(
            1200px 600px at -10% -10%,
            rgb(255 255 255 / 0.06),
            transparent 55%
        ),
        radial-gradient(
            1200px 600px at 110% 110%,
            rgb(255 255 255 / 0.03),
            transparent 55%
        ),
        radial-gradient(
            80% 180% at 50% 120%,
            rgb(0 0 0 / 0.14),
            transparent 65%
        ),
        linear-gradient(
            180deg,
            rgb(255 255 255 / 0.03),
            transparent 30%
        );
}

.uk-light .init-chatbox-message-body.is-vip::after,
.uk-light .uk-comment-primary.is-vip::after,
.uk-light .recent-comment-content.is-vip::after,
.uk-light .recent-review-content.is-vip::after {
    background:
        radial-gradient(
            280px 240px at 15% 25%,
            rgb(255 255 255 / 0.08),
            transparent 60%
        ),
        radial-gradient(
            340px 300px at 85% 20%,
            rgb(255 215 0 / 0.12),
            transparent 65%
        ),
        radial-gradient(
            360px 320px at 40% 85%,
            rgb(255 191 63 / 0.1),
            transparent 65%
        ),
        radial-gradient(
            260px 240px at 90% 90%,
            rgb(255 255 255 / 0.04),
            transparent 60%
        ),
        radial-gradient(
            200px 180px at 55% 45%,
            rgb(255 224 130 / 0.08),
            transparent 65%
        );
    opacity: 0.8;
}
</style>

Important Notes When Customizing VIP CSS In Init Manga

Avoid using extremely heavy animations because they may reduce mobile performance
Keep text contrast high enough for comfortable readability
Backdrop blur effects work best when the website has layered backgrounds
You can combine these styles with animated badges for stronger VIP visibility
Always test both light mode and dark mode before using the styles publicly

Final Thoughts

Upgrading your VIP interface not only improves the visual quality of your manga website but also increases the perceived value for premium users. With styles like Liquid Glass, Aurora, Neon Cyber and Royal Gold, you can easily transform the Init Manga comment system and chatbox into something far more modern, stylish and professional.

Depending on your website’s overall aesthetic, you can choose between soft luxury effects, fantasy-inspired lighting or futuristic cyberpunk visuals to create a unique identity for your community.

Series: Init Manga Tutorials , The Complete Guide to Init Manga

Previous post:
Init Manga v2.6.9 – Introducing the HeatWave Engine for Traffic-Shape-Aware Hot Growth Detection

Next post:
Init Manga v2.7.6 Introduces Guild System – Turning Your Reading Website into a Real Community