# Custom CSS for The\_Monster **URL:** \ **Category:** Usermods\ **Created:** [July 26, 2026, 12:29am UTC](https://wled.discourse.group/t/custom-css-for-the-monster/15472 "2026-07-26T00:29:27Z")\ **Posts on this page:** 4\ **Page:** 1
**Author:** ![SEKiller007](https://yyz2.discourse-cdn.com/free1/user_avatar/wled.discourse.group/sekiller007/32/10552_2.png) [@SEKiller007](https://wled.discourse.group/u/SEKiller007)\ **Post date:** [July 26, 2026, 12:29am UTC](https://wled.discourse.group/t/custom-css-for-the-monster/15472/1 "2026-07-26T00:29:27Z")
![Снимок экрана 2026-07-26 031443](https://global.discourse-cdn.com/free1/uploads/wled/original/2X/1/1d98f65d549fad16376c23de2425eb36e35bcc18.jpeg)[Будет удалено: Aug 09, 2026 03:27](https://ru.files.fm/u/5udcgm9j8j) ---
**Author:** ![blazoncek](https://yyz2.discourse-cdn.com/free1/user_avatar/wled.discourse.group/blazoncek/32/1886_2.png) [@blazoncek](https://wled.discourse.group/u/blazoncek)\ **Post date:** [July 28, 2026, 7:09am UTC](https://wled.discourse.group/t/custom-css-for-the-monster/15472/2 "2026-07-28T07:09:19Z")
Just post CSS or Github link to it. ---
**Author:** ![SEKiller007](https://yyz2.discourse-cdn.com/free1/user_avatar/wled.discourse.group/sekiller007/32/10552_2.png) [@SEKiller007](https://wled.discourse.group/u/SEKiller007)\ **Post date:** [July 28, 2026, 2:32pm UTC](https://wled.discourse.group/t/custom-css-for-the-monster/15472/3 "2026-07-28T14:32:07Z")
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)} ---
**Author:** ![blazoncek](https://yyz2.discourse-cdn.com/free1/user_avatar/wled.discourse.group/blazoncek/32/1886_2.png) [@blazoncek](https://wled.discourse.group/u/blazoncek)\ **Post date:** [July 31, 2026, 10:40am UTC](https://wled.discourse.group/t/custom-css-for-the-monster/15472/4 "2026-07-31T10:40:52Z")
That’s invalid CSS, unfortunately.