CUSTOM C.SH CSS [MUST TRY]

[536]

Hello Cracked I am new to Cracked and would like to introduce myself with a special gift!
Check out my custom CSS style for C.SH

Please leave a comment on what you would like to see next?

If you like the style please Like this post.

How to use -

Show ContentSpoiler:

Go to Settings > Custom CSS > Create > enter a CSS title > Paste CSS into the CSS box > Enable the CSS > Click Save!

CSS -

Code:

 
 * CRACKED.SH DELUXE THEME
 * Enhanced UI with Glassmorphism, Neon Glows & Fluid Animations
 * Author: Julius Ceasar
 */

:root {
    /* --- PREMIUM COLOR PALETTE --- */
    --gradient-1: #ff0f7b; 
    --gradient-2: #f89b29; 
    --gradient-3: #7C3AED; 
    --gradient-4: rgba(124, 58, 237, 0.25);
    
    /* Deluxe Backgrounds */
    --background-main: #050505; 
    --background-secondary: #0a0a0a; 
    --background-light: #121212; 
    --background-floating: #0f0f11; 
    --background-floating-alt: #161618; 
    --background-floating-light: #1a1a1d; 
    
    /* UI Elements */
    --border-color: #27272a; 
    --border: 1px solid var(--border-color);
    --radius: 12px;
    --banner-padding: 24px;
    --btn: rgba(255, 255, 255, 0.05); 
    --btn-hover: rgba(255, 255, 255, 0.1);
    --glass-bg: rgba(15, 15, 17, 0.7);
    --glass-border: rgba(255, 255, 255, 0.08);
    --neon-shadow: 0 0 10px rgba(124, 58, 237, 0.5);
}

/* --- ANIMATIONS --- */
@keyframes shine {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes pulse-glow {
    0%, 100% { opacity: 1; filter: brightness(1); }
    50% { opacity: 0.8; filter: brightness(1.2); }
}

/* --- GLOBAL RESETS --- */
body {
    background: var(--background-main) !important;
    background-image: radial-gradient(circle at top center, #1a1a1a 0%, #050505 40%) !important;
    font-family: 'Inter', system-ui, sans-serif;
}

/* --- PREMIUM RANKS --- */
.heaven_rank {
    background: linear-gradient(90deg, #ff0f7b, #f89b29, #ff0f7b);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 3s linear infinite;
    text-shadow: 0 0 15px rgba(255, 15, 123, 0.5);
    font-weight: 800;
}

.infinity_rank {
    background: linear-gradient(90deg, #FF0080, #7928CA, #FF0080);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 3s linear infinite;
    text-shadow: 0 0 15px rgba(255, 0, 128, 0.5);
    font-weight: 800;
}

.godlike_rank {
    background: linear-gradient(90deg, #7928CA, #FF0080, #7928CA);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 3s linear infinite;
    text-shadow: 0 0 15px rgba(121, 40, 202, 0.5);
    font-weight: 800;
}

.supreme_rank {
    background: linear-gradient(90deg, #00b09b, #96c93d, #00b09b);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 3s linear infinite;
    text-shadow: 0 0 15px rgba(150, 201, 61, 0.5);
    font-weight: 800;
}

/* --- GLASSMORPHISM COMPONENTS --- */
#inner-container, .tborder, .navigation {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.thead {
    background: linear-gradient(90deg, rgba(124, 58, 237, 0.1) 0%, rgba(255, 15, 123, 0.1) 100%) !important;
    border-bottom: 1px solid var(--glass-border);
    padding: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.trow1, .trow2 {
    background: transparent !important;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s ease;
}

.trow1:hover, .trow2:hover {
    background: rgba(255, 255, 255, 0.02) !important;
}

/* --- BUTTONS & CONTROLS --- */
.button, a.button {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--glass-border) !important;
    backdrop-filter: blur(4px);
    color: #fff !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.button:hover, a.button:hover {
    background: linear-gradient(135deg, var(--gradient-3), var(--gradient-1)) !important;
    border-color: transparent !important;
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.4);
    transform: translateY(-2px);
}

/* --- INPUTS --- */
input.textbox, select, textarea {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid var(--border-color) !important;
    color: white !important;
    padding: 10px 15px;
    transition: border-color 0.2s;
}

input.textbox:focus, select:focus, textarea:focus {
    border-color: var(--gradient-3) !important;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2);
    outline: none;
}

/* --- HEADER & NAVIGATION --- */
#logo {
    background: transparent !important;
    padding: 40px 0;
}

.drop-nav {
    background: rgba(10, 10, 10, 0.95);
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 40px -5px rgba(0,0,0,0.5);
    border-radius: var(--radius);
}

/* --- AVATARS & USER PROFILES --- */
.p-avatar img {
    border-radius: 50% !important;
    border: 3px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease;
}

.p-avatar img:hover {
    transform: scale(1.05);
    border-color: var(--gradient-3);
}

/* --- PAGINATION --- */
.pagination a {
    background: var(--background-floating) !important;
    border: 1px solid var(--border-color);
    transition: all 0.2s;
}

.pagination .pagination_current {
    background: linear-gradient(135deg, var(--gradient-3), var(--gradient-1)) !important;
    border: none;
    box-shadow: 0 0 10px rgba(124, 58, 237, 0.4);
}

Ad by: @Nuttela | Expires / 03-24

[536]

This is a bump

Ad by: @Nuttela | Expires / 03-24

[536]

This is a bump

Ad by: @Nuttela | Expires / 03-24