CSS Snippets 💫

Personality:   Nanananananana My chemical romance reference ayyyh :3

Scenario:  

First Message:   <div class="arcade-btn"> put ur welcome mssg/somethin </div> <div class="warning">!!! MINORS DNI - *insert cw/tw* !!!</div> <div class="glitch"> say something!! </div> <details class="holo-dropdown"> <summary>about me</summary> <div class="sparkle"> ✮ name ✮ pro/nouns ✮ bday ✮ anything! ✮ fandoms </div> </details> <details class="glass-drop"> <summary>STATUS</summary> <div class="boot">status :)</div> </details> <div class="toggle-panel"> <div class="toggle">ON</div> <div class="toggle">OFF</div> <div class="toggle">AUTO</div> </div> <div class="loading-bar"></div> </div> <div class="eq"> <span></span><span></span><span></span><span></span> </div> <div class="btn-grid"> <div>@ur friend's user</div> <div>@ur other acc on other sites?)</div> <div>idfk</div> </div> <details> <summary>rules</summary> I will not make stepcest/incest, fetishes, or anything I don't want to ♦ put requests in the comments ♦ please do not leave homphobic, racist, transphobic, or really any bigoted comments ♦ please be nice to me and others </details> <div class="container"> <div class="title">LIVE DATA</div> <div class="scrollbox"> Eugh insert text and more texttttt </div> </div> <style> <style> details{ width: 520px; margin: 25px auto; border-radius: 18px; overflow: hidden; border: 2px solid #ff2ea6; background: linear-gradient(135deg,#050505,#140021); box-shadow: 0 0 25px rgba(255,46,166,0.6); position: relative; transition: 0.4s; } </style> <style> details::after{ content:""; position:absolute; inset:0; pointer-events:none; background: repeating-linear-gradient( 0deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 4px ); } </style> details:hover{ transform: scale(1.02); box-shadow: 0 0 40px rgba(0,255,255,0.5); } </style> <style> summary{ font-family: 'Press Start 2P'; font-size: 12px; color:#fff; padding: 12px; background: linear-gradient(90deg,#ff2ea6,#00f0ff); text-shadow:0 0 8px #000; cursor:pointer; position: relative; } </style> <style> summary::after{ content: " ▼"; float:right; font-size:10px; color:#000; } </style> <style> details[open] summary::after{ content:" ▲"; } </style> <style> details{ font-family:'VT323'; color:#ddd; font-size:18px; padding-bottom:10px; } </style> <style> details[open]{ box-shadow: 0 0 50px rgba(255,46,166,0.8); } </style> <style> details > *:not(summary){ padding: 12px; } </style> <style> .container{ display:flex; flex-direction:column; width: 320px; margin:20px auto; border-radius: 16px; overflow:hidden; border:2px solid #00f0ff; background:#000; box-shadow:0 0 20px #00f0ff; } </style> <style> .title{ background: linear-gradient(90deg,#00f0ff,#ff2ea6); color:#000; text-align:center; font-family:'Press Start 2P'; font-size:12px; padding:10px; } </style> <style> .scrollbox{ overflow: hidden auto; height: 220px; padding:10px; font-family:'VT323'; font-size:18px; color:#00ffcc; background:#050505; position: relative; } </style> <style> .scrollbox::after{ content:""; position:absolute; inset:0; pointer-events:none; background: repeating-linear-gradient( 0deg, rgba(255,255,255,0.03), rgba(255,255,255,0.03) 1px, transparent 1px, transparent 4px ); } </style> <style> /* SCROLLBAR */ .scrollbox::-webkit-scrollbar{ width:6px; } .scrollbox::-webkit-scrollbar-thumb{ background:#00f0ff; border-radius:10px; } </style> <style> .glitch{ position:relative; color:#fff; font-family:'Press Start 2P'; animation: glitch 1s infinite; } @keyframes glitch{ 0%{text-shadow:2px 0 #ff2ea6,-2px 0 #00f0ff;} 50%{text-shadow:-2px 0 #ff2ea6,2px 0 #00f0ff;} 100%{text-shadow:2px 0 #ff2ea6,-2px 0 #00f0ff;} } </style> <style> .warning{ border:2px dashed #ff2ea6; padding:10px; font-family:'VT323'; color:#ff2ea6; text-align:center; animation: blink 1.2s infinite; } @keyframes blink{ 50%{opacity:0.4;} } </style> <style> .arcade-btn{ display:inline-block; padding:10px 14px; margin:5px; font-family:'Press Start 2P'; font-size:10px; color:#fff; border-radius:999px; background: linear-gradient(90deg,#ff2ea6,#00f0ff); cursor:pointer; transition:0.3s; } .arcade-btn:hover{ transform:scale(1.1); box-shadow:0 0 15px #ff2ea6; } </style> <style> .holo-dropdown{ width:520px; margin:25px auto; border-radius:20px; overflow:hidden; backdrop-filter: blur(12px); background: rgba(255,255,255,0.05); border:1px solid rgba(0,255,255,0.4); box-shadow:0 0 25px rgba(0,255,255,0.5); } </style> <style> .holo-dropdown summary{ font-family:'Press Start 2P'; font-size:12px; padding:12px; color:#00f0ff; background: rgba(0,0,0,0.5); } </style> <style> .holo-dropdown[open]{ box-shadow:0 0 40px #00f0ff; } </style> <style> .toggle-panel{ display:flex; justify-content:space-around; padding:10px; font-family:'VT323'; } .toggle{ padding:6px 10px; border:1px solid #ff2ea6; border-radius:999px; cursor:pointer; color:#ff2ea6; transition:0.3s; } .toggle:hover{ background:#ff2ea6; color:#000; } </style> <style> .loading-bar{ width:100%; height:10px; background:#111; border-radius:999px; overflow:hidden; } .loading-bar::before{ content:""; display:block; height:100%; width:40%; background: linear-gradient(90deg,#ff2ea6,#00f0ff); animation: loadmove 2s infinite; } @keyframes loadmove{ 0%{transform:translateX(-100%);} 100%{transform:translateX(300%);} } </style> <style> /* SLOT MACHINE TEXT */ .slot{ font-family:'Press Start 2P'; color:#fff; animation: slotspin 1s steps(5) infinite; } @keyframes slotspin{ 0%{transform:translateY(0);} 100%{transform:translateY(-20px);} } </style> <style> .eq{ display:flex; gap:3px; height:20px; align-items:flex-end; } .eq span{ width:4px; background:#00f0ff; animation: bounce 1s infinite alternate; } .eq span:nth-child(2){animation-delay:0.2s;} .eq span:nth-child(3){animation-delay:0.4s;} .eq span:nth-child(4){animation-delay:0.6s;} @keyframes bounce{ from{height:5px;} to{height:20px;} } </style> <style> .glass-drop{ width:520px; margin:25px auto; border-radius:16px; background: rgba(0,0,0,0.4); backdrop-filter: blur(8px); border:1px solid rgba(255,46,166,0.4); } .glass-drop summary{ padding:12px; font-family:'Press Start 2P'; color:#ff2ea6; } </style> <style> .boot{ font-family:'VT323'; color:#00ffcc; animation: typing 3s steps(30,end) infinite; white-space:nowrap; overflow:hidden; border-right:2px solid #00ffcc; } @keyframes typing{ from{width:0;} to{width:100%;} } </style> <style> .btn-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:10px; } .btn-grid div{ background:#111; border:1px solid #00f0ff; text-align:center; padding:8px; font-family:'VT323'; cursor:pointer; } .btn-grid div:hover{ background:#00f0ff; color:#000; } </style>

Example Dialogs: