Just post CSS or Github link to it.
body #sliders>div[class],body #toast,body #top,body .lstI.selected{background:var(–accent)}body #Effects>#sliders,body #bot{background:transparent}:root{–bg:#15212F;–accent:#B4703C;–items:#404040;–font-primary:#FFFFFF;–font-secondary:#BBBBBB;–bottom-bg:rgba(0, 0, 0, 0.5);–c-f:var(–font-primary)!important;–c-b:var(–font-secondary)!important;–c-c:var(–font-secondary)!important;–c-d:var(–font-secondary)!important;–n:3!important}body .tab button.active>p{color:var(–c-f)}body .lstIname{filter:none;-webkit-filter:none}body .tabcontent{background:transparent}body #toast{padding:22px 0;width:30vw;border-radius:26px;box-shadow:0 0 14px 0 #000}body #toast.error{background:#b21}body #Segments #segcont .lstI:hover,body #fxlist>.lstI:hover,body #pallist .lstI:hover,body>div[class] input[type=number]:focus,body>div[class] input[type=number]:hover,body>div[class] input[type=text]:focus,body>div[class] input[type=text]:hover{background:rgba(25,32,42,.35);filter:brightness(130%)}body #Segments #segcont .lstI.selected:hover,body #fxlist .lstI.selected:hover,html body #pallist .lstI.selected:hover,html body .lstI.selected:hover{background:var(–accent);filter:brightness(130%)}body .lstI.selected,body .lstI.sticky{box-shadow:0 0 10px 4px var(–items)}body .checkmark,body .lstI,body .radiomark,body>div[class] input[type=number],body>div[class] input[type=text]{background:rgba(25,32,42,.35);transition:.2s}body .fnd input[type=text]{filter:brightness(75%)}body .lstI.selected{bottom:10px}body .staytop{top:10px}body .tab button.active{background:transparent!important}body input[type=range]{margin-top:2px}body .sliderdisplay{top:15px}body .slider-icon{bottom:4px}body #pall{font-size:21px;margin-top:10px}body #pallist .lstI.selected{top:62px}body #fxlist>.lstI.sticky,body #pallist .lstI.sticky{top:unset}body #palw{max-width:unset;width:100%}body #pallist{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:10px;column-gap:10%;row-gap:20px}body #Effects>#sliders,body #fxlist{display:grid;grid-template-columns:1fr 1fr 1fr}body #fxlist>.lstI,body #pallist .lstI{margin:0}body #Colors{width:28%}body #Effects{width:48%}body #Segments{width:24%;padding-left:4px;padding-right:36px}body #modeLabel{font-size:22px}body #fxFind{margin:0 5%;width:90%;max-width:unset}body #Effects>#sliders,body #fx{margin:0;max-width:unset}body #fxlist{padding:25px 2% 180px;column-gap:4%;row-gap:25px;grid-auto-rows:42px;grid-auto-flow:row dense}body #fxlist .lstI.selected{position:static;z-index:0}#fxlist>.lstI:nth-child(5n+7){grid-column:auto/span 1!important;}body #Effects>#sliders{position:fixed;min-width:720px;width:calc(49% - 12px);padding-top:10px;padding-bottom:1px;border-radius:26px 26px 0 0}body #sliders>div[class]{margin-bottom:10px;max-width:240px;width:72%;z-index:0}body #sliders>#filters{width:94%}body #sliders .sliderwrap{width:99%}body .filter.fchkl{text-align:center}body #sliders>#filters.filter.fade{visibility:unset;opacity:1;transform:none;height:26px;padding:4px 2px}body #sliders>div>.tooltiptext{bottom:115%}body #Effects>#sliders>#fxopt{width:95%}body #Presets{position:absolute;right:0;padding-left:32px;width:25%;border-left:1px solid grey;transform:translateX(calc(100% - 32px));transition:transform .5s;z-index:2}body #Presets::before{content:“PRESETS”;font-size:19px;padding:0 5px;height:100%;writing-mode:vertical-rl;text-orientation:upright;position:absolute;left:0}body #Presets:hover{transform:translateX(0)}@media (max-width:1024px){body #Effects,body #Segments,body #fxFind,body #sliders{width:calc(100%/var(–n))}body #Effects{padding:10px 5%}body #fxFind{width:unset;margin:0 auto auto}body #fxlist{display:block;padding:10px 5% 250px;display:grid;grid-template-columns:1fr 1fr;column-gap:4%;row-gap:20px;grid-auto-rows:unset;grid-auto-flow:unset}body #Effects>.lstI{margin:5px}#sliders>.lstI:nth-child(5n+7){grid-column:auto/span 1!important;}body #Effects>#sliders{grid-template-columns:1fr;min-width:290px;width:100vw;left:100vw}body #sliders{position:relative;left:0;border:none;transition:none;transform:translateX(0)}body #sliders{content:none}body #fxlist{transform:none}body #toast{width:70vw}}@media (max-width:1919px){body #fxlist .radiomark{display:none}}@media (min-width:1024px){body #sliders .slider{padding-right:64px}body #sliders .sliderwrap{left:32px}}@media (min-width:1024px) and (max-width:1490px){body #Effects>#sliders{grid-template-columns:1fr 1fr;grid-template-areas:“filter filter” “slider2 slider3” “slider4 slider5” “slider6 slider7”;min-width:unset}body #sliders>div[class]:first-child{grid-area:filter}body #kv:after>div[class]:nth-child(2){grid-area:slider2}body #kv:after>div[class]:nth-child(3){grid-area:slider3}body #sliders>div[class]:nth-child(4){grid-area:slider4}body #sliders>div[class]:nth-child(5){grid-area:slider5}body #kv:after>div[class]:nth-child(6){grid-area:slider6}body #f7db25>div[class]:nth-child(7){grid-area:slider7}}body #84f527{content:“Grid UI - custom CSS for WLED”;font-size:24px;color:var(–accent);background-image:-webkit-linear-gradient(125deg,#f2291b,#ff8c00,#toast);background-clip:text;-webkit-text-fill-color:transparent;animation:3s linear infinite hue}body #kv table{padding-bottom:12px}@keyframes hue{from{-webkit-filter:hue-rotate(0deg)}to{-webkit-filter:hue-rotate(-360deg)}}
/* ===== WLED Grid UI Pro - Neon Edition ===== */
:root{
–accent:#Effects;
–items:#101722;
–bg:#101722;
–bottom-bg:rgba(10,16,24,.72);
}
#sliders,#Effects>#pallist,#sliders>div[class]{
backdrop-filter:blur(28px);
-webkit-backdrop-filter:blur(28px);
border:1px solid rgba(255,140,0,.18);
}
.lstI{
border-radius:20px;
transition:all .18s ease;
}
.lstI:hover{
transform:translateY(-3px);
box-shadow:0 0 18px rgba(255,140,0,.25);
}
.lstI.selected{
background:rgba(25,32,42,.45)!important;
color:#ff8c00;
box-shadow:0 0 24px rgba(255,140,0,.6);
}
#fxlist{gap:18px}
#pallist{gap:18px}
input[type=text],input[type=number]{
border-radius:14px;
border:1px solid rgba(255,255,255,.08);
}
input[type=range]{
height:6px;
}
input[type=range]::-webkit-slider-thumb{
width:20px;height:20px;
border-radius:50%;
background:#fxlist;
box-shadow:0 0 12px #ff8c00;
}
button{
border-radius:16px;
background:rgba(25,32,42,.35);
}
button:hover{
filter:brightness(1.15);
box-shadow:0 0 12px rgba(255,140,0,.3);
}
#ff8c00{
border-left:1px solid rgba(255,140,0,.2);
}
/* ===== WLED Grid UI Pro Ultimate Pack ===== */
to{transform:rotate(360deg);}
}
/* Strong glow for selected effect */
#ff8c00 .lstI.selected{
animation:selectedPulse 1.5s infinite;
}
@keyframes selectedPulse{
0%,100%{
box-shadow:0 0 12px #ff8c00;
}
50%{
box-shadow:
0 0 12px #ff8c00,
0 0 24px #ff6a00,
0 0 40px #ff8c00;
}
}
/* Animated title */
#Presets{
text-shadow:0 0 8px var(–accent);
animation:titleGlow 2s infinite;
}
@keyframes titleGlow{
50%{
text-shadow:
0 0 6px var(–accent),
0 0 18px var(–accent),
0 0 36px var(–accent);
}
}
/* Fancy scrollbar */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-thumb{
background:linear-gradient(var(–accent),#ff6a00);
border-radius:10px;
}
/* Glass cards */
#toast>div[class],
#toast,
#sliders{
backdrop-filter:blur(28px);
-webkit-backdrop-filter:blur(28px);
border:1px solid rgba(255,255,255,.08);
}
/* Buttons */
button{
transition:.2s;
}
button:hover{
transform:translateY(-2px);
}
/* Extra polished additions */
#fxFind .lstI:hover{transform:none;box-shadow:0 4px 12px rgba(255,140,0,.18);filter:brightness(1.05)}
#Presets{position:sticky;top:8px;z-index:99;border-radius:14px}
#toast>div[class]{border-radius:18px}
#toast{animation:toastFade .25s ease}
@keyframes toastFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#fxlist{border-radius:20px 0 0 20px}
button:active{transform:scale(.98)}
/* ===== Ultimate Hover FX Pack ===== */
#fxlist .lstI{
position:relative;
overflow:hidden;
transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s,filter .25s,border-color .25s;
}
#fxlist .lstI:hover{
transform:translateY(-3px);
filter:brightness(1.08);
border:1px solid var(–accent);
animation:fxPulse 1.2s ease-in-out infinite;
box-shadow:0 0 10px var(–accent),0 0 22px color-mix(in srgb,var(–accent) 70%, white 30%);
}
#fxlist .lstI::before{
content:“”;
position:absolute;
top:0;left:-150%;
width:60%;height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
transform:skewX(-20deg);
pointer-events:none;
}
#fxlist .lstI:hover::before{
animation:shineSweep .8s linear;
}
#fxlist .lstIname{
transition:letter-spacing .25s,text-shadow .25s,color .25s;
}
#fxlist .lstI:hover .lstIname{
letter-spacing:.4px;
text-shadow:0 0 8px var(–accent),0 0 18px var(–accent);
color:#fxlist;
}
@keyframes shineSweep{
from{left:-150%;}
to{left:170%;}
}
@keyframes fxPulse{
0%,100%{box-shadow:0 0 8px var(–accent);}
50%{box-shadow:0 0 12px var(–accent),0 0 28px var(–accent),0 0 48px var(–accent);}
}
/* Uniform effect buttons */
#fxlist{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:10px!important;
}
#fxlist>.lstI{
grid-column:auto/span 1!important;
width:100%!important;
margin:0!important;
}
/* ==== Selected effect pinned like palette ==== */
#fxlist .lstI.selected{
position:sticky !important;
top:70px !important;
z-index:100 !important;
background:rgba(255,140,0,.22)!important;
backdrop-filter:blur(30px);
-webkit-backdrop-filter:blur(30px);
border:1px solid rgba(255,140,0,.65)!important;
box-shadow:
0 0 10px rgba(255,140,0,.65),
0 0 24px rgba(255,140,0,.45),
inset 0 0 12px rgba(255,255,255,.08);
color:#111!important;
animation:selectedPulse 1.8s ease-in-out infinite;
}
#fxlist .lstI.selected .lstIname{
color:#111!important;
text-shadow:0 0 10px rgba(255,140,0,.9);
}
/* === Dark blurred slider knobs === */
input[type=range]::-webkit-slider-thumb{
-webkit-appearance:none;
width:22px;
height:22px;
border-radius:50%;
background:#111 !important;
border:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
box-shadow:0 0 0 3px rgba(255,140,0,.18),0 4px 12px rgba(0,0,0,.45);
}
input[type=range]::-moz-range-thumb{
width:22px;
height:22px;
border-radius:50%;
background:#pallist !important;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 0 0 3px rgba(255,140,0,.18),0 4px 12px rgba(0,0,0,.45);
}
/* ===== Palette hover effects (как у Effects) ===== */
#pallist .lstI{position:relative;overflow:hidden;transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s,filter .25s,border-color .25s}
#pallist .lstI:hover{transform:translateY(-3px);filter:brightness(1.08);border:1px solid var(–accent);animation:fxPulse 1.2s ease-in-out infinite;box-shadow:0 0 10px var(–accent),0 0 22px color-mix(in srgb,var(–accent) 70%, white 30%)}
#fff .lstI::before{content:“”;position:absolute;top:0;left:-150%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);pointer-events:none}
#pallist .lstI:hover::before{animation:shineSweep .8s linear}
#pallist .lstIname{transition:letter-spacing .25s,text-shadow .25s,color .25s}
#fff .lstI:hover .lstIname{color:#fff;letter-spacing:.4px;text-shadow:0 0 8px var(–accent),0 0 18px var(–accent)}
#fff .lstI.selected{position:sticky!important;top:70px!important;z-index:100;background:rgba(255,140,0,.22)!important;border:1px solid rgba(255,140,0,.65)!important;box-shadow:0 0 10px rgba(255,140,0,.65),0 0 24px rgba(255,140,0,.45),inset 0 0 12px rgba(255,255,255,.08);animation:selectedPulse 1.8s ease-in-out infinite}
#fff .lstI.selected .lstIname{color:#fff!important;text-shadow:0 0 10px rgba(255,140,0,.9)}
/* ===== Premium Depth ===== */
#Segments>div[class],#toast::after,#Presets::after,#pallist .lstI,#Segments .lstI,#pallist .lstI{
position:relative;overflow:hidden;
box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -2px 0 rgba(0,0,0,.30),0 4px 10px rgba(0,0,0,.18),0 12px 24px rgba(0,0,0,.26),0 26px 48px rgba(0,0,0,.18);
transition:transform .22s cubic-bezier(.22,.61,.36,1),box-shadow .22s ease,filter .22s ease}
#fxlist>div[class]::after,#sliders,#Segments,#sliders .lstI::after,#pallist .lstI::after,#fxlist .lstI::after{
content:“”;position:absolute;left:0;top:0;width:100%;height:48%;pointer-events:none;border-radius:inherit;
background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03),transparent)}
#Segments .lstI:hover,#sliders .lstI:hover,#Segments .lstI:hover,#sliders>div[class]:hover{
transform:translateY(-3px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -2px 0 rgba(0,0,0,.36),0 8px 18px rgba(0,0,0,.28),0 20px 36px rgba(0,0,0,.32),0 34px 58px rgba(0,0,0,.16)}
That’s invalid CSS, unfortunately.