Example custom CSS styles for morphism effects, dark themes, and more. Copy and use them in your projects. Some components may use rounded corners. If you need that, add border-radius: ...; to the CSS (for example, border-radius: 6px). If you would like to see something special added here, send an email to my AI assistant at ava@xcaliburmoon.net. The system will prioritize your request and notify me.
Showing 56 styles
<div style="background: linear-gradient(145deg, #1a1a2e, #16213e); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); padding: 12px 16px; color: #fff;"> Preview Text </div>
background: linear-gradient(145deg, #1a1a2e, #16213e); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
<div class="preview-example dark-morphism" style="background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3); padding: 12px 16px;"> Preview Text </div>
.preview-example.dark-morphism {
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
padding: 12px 16px; /* text padding */
}
<div style="background: linear-gradient(145deg, #0a0a0f, #15152a); border: 1px solid rgba(255, 255, 255, 0.05); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); padding: 12px 16px; color: #fff;"> Preview Text </div>
background: linear-gradient(145deg, #0a0a0f, #15152a); border: 1px solid rgba(255, 255, 255, 0.05); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
<div style="background: rgba(17, 25, 40, 0.85); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.125); padding: 12px 16px;"> <span style="color: #fff;">Preview Text</span> </div>
background: rgba(17, 25, 40, 0.85); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.125);
<div style="color: #ffffff; background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1a 100%); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); padding: 12px 16px;"> Preview Text </div>
background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1a 100%); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
<div style="color: #00ff88; background: #0d0d0d; border: 1px solid #00ff88; box-shadow: 0 0 20px rgba(0, 255, 136, 0.3), inset 0 0 20px rgba(0, 255, 136, 0.1); padding: 12px 16px;"> Preview Text </div>
background: #0d0d0d; border: 1px solid #00ff88; box-shadow: 0 0 20px rgba(0, 255, 136, 0.3), inset 0 0 20px rgba(0, 255, 136, 0.1);
<div style="color: #dc143c; background: #1a0a0a; border: 1px solid #dc143c; box-shadow: 0 0 25px rgba(220, 20, 60, 0.3); padding: 12px 16px;"> Preview Text </div>
background: #1a0a0a; border: 1px solid #dc143c; box-shadow: 0 0 25px rgba(220, 20, 60, 0.3);
<!-- This is cool with JS effect --><button type="button" style="display:inline-block; padding:10px 16px; border:0; border-radius:8px; background:#1a1a2e; color:#fff; cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,0.18); transition:transform 160ms ease, box-shadow 160ms ease;" onmouseenter="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 12px 40px rgba(0,0,0,0.2)';" onmouseleave="this.style.transform='translateY(0px)'; this.style.boxShadow='0 6px 20px rgba(0,0,0,0.18)';"> Button </button>
transform: translateY(-2px); box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.2);
<button type="button" style="display: inline-block; padding: 14px 28px; border: 1px solid #333; font-weight: 600; font-size: 14px; cursor: pointer; background: #1a1a1a; color: #ffffff;"> Button </button>
padding: 14px 28px; border: 1px solid #333; font-weight: 600; font-size: 14px; cursor: pointer; background: #1a1a1a; color: #ffffff;