Next-level expandable electric login form | HTML, CSS & JavaScript

<div class="container">
    <div class="section-wrapper">
        <h2 class="section-title">Soft Emboss</h2>
        <div class="demo-section">
            <div class="preview-panel">
                <div class="text-box emboss-soft">EMBOSS</div>
            </div>
        </div>
    </div>

<div class="section-wrapper">
        <h2 class="section-title">Deep Emboss</h2>
        <div class="demo-section">
            <div class="preview-panel">
                <div class="text-box emboss-deep">EMBOSS</div>
            </div>
        </div>
    </div>

<div class="section-wrapper">
        <h2 class="section-title">Debossed (Pressed Inward)</h2>
        <div class="demo-section">
            <div class="preview-panel">
                <div class="text-box debossed">PRESSED</div>
            </div>
        </div>
    </div>

<div class="section-wrapper">
        <h2 class="section-title">Metallic Emboss</h2>
        <div class="demo-section">
            <div class="preview-panel">
                <div class="text-box emboss-metal">METAL</div>
            </div>
        </div>
    </div>

</div>

* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

:root {
        --bg: #d1d9e6;
        --title: #5b697d;
        --shadow-dark: rgba(163, 177, 198, 0.6);
        --shadow-light: rgba(255, 255, 255, 0.7);
        --code-bg: #1e2128;
    }

body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        background: var(--bg);
        padding: 60px 20px;
        color: #444;
        line-height: 1.6;
        scale:0.7
    }

.container {
        max-width: 1200px;
        margin: auto;
    }

/* --- PAGE HEADER --- */
    .page-title {
        text-align: center;
        margin-bottom: 60px;
        color: var(--title);
        font-size: 3rem;
        font-weight: 800;
        letter-spacing: -1px;
        /* Subtle emboss for the title itself */
        text-shadow: 1px 1px 2px rgba(255,255,255,0.8), -1px -1px 2px rgba(0,0,0,0.1);
    }

/* --- SECTION LAYOUT --- */
    .section-wrapper {
        background: var(--bg);
        border-radius: 30px;
        padding: 40px;
        margin-bottom: 150px;
        box-shadow: 
            10px 10px 20px var(--shadow-dark),
            -10px -10px 20px var(--shadow-light);
    }

.section-title {
        margin-bottom: 25px;
        color: var(--title);
        font-size: 1.5rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 12px;
    }

.section-title::before {
        content: "";
        display: inline-block;
        width: 12px;
        height: 12px;
        background: var(--title);
        border-radius: 50%;
        box-shadow: inset 2px 2px 4px rgba(0,0,0,0.3), inset -2px -2px 4px rgba(255,255,255,0.8);
    }

.demo-section {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        align-items: stretch;
    }

/* --- PREVIEW PANEL --- */
    .preview-panel {
        background: var(--bg);
        border-radius: 20px;
        min-height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
        /* Pressed/Inset effect for the canvas */
        box-shadow: 
            inset 6px 6px 12px var(--shadow-dark),
            inset -6px -6px 12px var(--shadow-light);
        border: 2px solid rgba(255,255,255,0.2);
    }

/* --- EMBOSS TEXT EFFECTS (Untouched Originals) --- */
    .text-box {
        font-size: 4.5rem;
        font-weight: 900;
        letter-spacing: 4px;
        text-transform: uppercase;
        color: var(--bg);
    }

.emboss-soft {
        text-shadow:
            -1px -1px 2px rgba(255,255,255,.8),
             1px  1px 2px rgba(0,0,0,.2);
    }

.emboss-deep {
        color: #c5cedd;
        text-shadow:
            -2px -2px 4px rgba(255,255,255,.9),
             2px  2px 4px rgba(0,0,0,.3),
            -1px -1px 0 rgba(255,255,255,.5),
             1px  1px 0 rgba(0,0,0,.2);
    }

.debossed {
        text-shadow:
             1px  1px 2px rgba(255,255,255,.8),
            -1px -1px 2px rgba(0,0,0,.3);
    }

.emboss-metal {
        color: #b0b5c0;
        text-shadow:
            -1px -1px 0 rgba(255,255,255,.7),
             1px  1px 0 rgba(0,0,0,.6),
            -2px -2px 5px rgba(255,255,255,.5),
             2px  2px 5px rgba(0,0,0,.5);
    }

/* --- RESPONSIVE --- */
    @media(max-width: 960px) {
        body { padding: 30px 15px; }
        .demo-section { grid-template-columns: 1fr; }
        .text-box { font-size: 3rem; }
        .preview-panel { min-height: 200px; }
        .section-wrapper { padding: 25px; }
    }

- Next-level expandable electric login form

Live Preview