22 CSS Split Screen Layouts09 / 22

Pure CSSMIT licensed

Jewelry Sign-in

Jewelry boutique sign-in — champagne cream + obsidian black + rose gold. Brand on one side, sign-in form on the other. The kind of split-screen Tiffany would commission. Real <form> with proper labels and autocomplete tokens.

Published Updated

Live Demo
Try it

The code

<section class="ss-jew" aria-label="Jewelry account sign-in">
  <aside class="ss-jew-brand">
    <span class="ss-jew-mark" aria-hidden="true"></span>
    <span class="ss-jew-since">EST. 1924</span>
    <h2><em>Maison</em><br />Aurelia.</h2>
    <p>Welcome back. Your private viewing room and saved pieces are one sign-in away.</p>
    <span class="ss-jew-divider" aria-hidden="true"></span>
    <span class="ss-jew-quote"><em>"Adorned with intent."</em></span>
  </aside>
  <article class="ss-jew-form-wrap">
    <header>
      <span class="ss-jew-eye">— Members only</span>
      <h3>Sign in to your account.</h3>
    </header>
    <form class="ss-jew-form">
      <label>
        <span class="ss-jew-lbl">Email</span>
        <input
          type="email"
          name="email"
          autocomplete="email"
          placeholder="iris@maison.tld"
          required
        />
      </label>
      <label>
        <span class="ss-jew-lbl">Password</span>
        <input
          type="password"
          name="password"
          autocomplete="current-password"
          placeholder="••••••••••"
          required
        />
      </label>
      <div class="ss-jew-row">
        <label class="ss-jew-check"
          ><input type="checkbox" /> <span>Remember this device</span></label
        >
        <a href="#!">Forgot password</a>
      </div>
      <button type="submit" class="ss-jew-cta">Enter the salon</button>
      <p class="ss-jew-meta">Not a member? <a href="#!">Request an invitation</a></p>
    </form>
  </article>
</section>
.ss-jew {
  width: 100%;
  display: grid;
  grid-template-columns: 45% 55%;
  min-height: 100vh;
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  background: #fbf6e8;
  color: #1a1612;
  border-radius: 0;
  overflow: hidden;
}

.ss-jew-brand {
  background: radial-gradient(60% 80% at 50% 30%, #1a1612 0%, #0a0806 100%);
  color: #f5e6c8;
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}

.ss-jew-mark {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f3c0a4 0%, #b88a6a 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.18), 0 0 0 6px rgba(243,192,164,0.12);
  position: relative;
}

.ss-jew-mark::after {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid #1a1612;
  border-radius: 50%;
}

.ss-jew-since {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.32em;
  color: #b88a6a;
}

.ss-jew-brand h2 {
  margin: 4px 0 0;
  font-size: clamp(40px, 5.5vw, 64px);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: #f5e6c8;
}

.ss-jew-brand h2 em {
  font-style: italic;
  color: #f3c0a4;
}

.ss-jew-brand p {
  margin: 4px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: #c8b896;
  max-width: 380px;
  font-style: italic;
}

.ss-jew-divider {
  display: block;
  width: 60px;
  height: 1px;
  background: #b88a6a;
  margin-top: 16px;
}

.ss-jew-quote {
  margin-top: auto;
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-style: italic;
  color: #b88a6a;
  letter-spacing: 0.04em;
}

.ss-jew-form-wrap {
  padding: 44px 48px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  background: linear-gradient(180deg, #fff 0%, #fbf6e8 100%);
}

.ss-jew-eye {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #b88a6a;
}

.ss-jew-form-wrap h3 {
  margin: 6px 0 0;
  font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #1a1612;
  line-height: 1.05;
  font-style: italic;
}

.ss-jew-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 400px;
}

.ss-jew-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ss-jew-lbl {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6a4a35;
}

.ss-jew-form input[type="email"],
.ss-jew-form input[type="password"] {
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #c8b896;
  border-radius: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  color: #1a1612;
  font-style: italic;
  transition: border-color 0.14s, box-shadow 0.14s;
}

.ss-jew-form input:focus {
  outline: 0;
  border-color: #b88a6a;
  box-shadow: 0 0 0 3px rgba(184,138,106,0.15);
}

.ss-jew-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #4a3a2a;
}

.ss-jew-check {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.ss-jew-check input {
  accent-color: #b88a6a;
}

.ss-jew-row a {
  color: #b88a6a;
  text-decoration: none;
}

.ss-jew-row a:hover {
  text-decoration: underline;
}

.ss-jew-cta {
  padding: 14px 22px;
  background: #1a1612;
  color: #f5e6c8;
  border: 0;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.16s;
}

.ss-jew-cta:hover {
  background: #b88a6a;
  color: #1a1612;
}

.ss-jew-meta {
  margin: 6px 0 0;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #6a4a35;
  text-align: center;
}

.ss-jew-meta a {
  color: #b88a6a;
  text-decoration: none;
}

.ss-jew-meta a:hover {
  text-decoration: underline;
}

@media (max-width: 720px) {
  .ss-jew {
    grid-template-columns: 1fr;
  }

  .ss-jew-brand {
    padding: 36px 28px;
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Split Screen Layout from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Jewelry Sign-in
Source: https://codefronts.com/layouts/css-split-screen/jewelry-sign-in/

Jewelry boutique sign-in — champagne cream + obsidian black + rose gold. Brand on one side, sign-in form on the other. The kind of split-screen Tiffany would commission. Real <form> with proper labels and autocomplete tokens.
## HTML
```html
<section class="ss-jew" aria-label="Jewelry account sign-in">
  <aside class="ss-jew-brand">
    <span class="ss-jew-mark" aria-hidden="true"></span>
    <span class="ss-jew-since">EST. 1924</span>
    <h2><em>Maison</em><br />Aurelia.</h2>
    <p>Welcome back. Your private viewing room and saved pieces are one sign-in away.</p>
    <span class="ss-jew-divider" aria-hidden="true"></span>
    <span class="ss-jew-quote"><em>"Adorned with intent."</em></span>
  </aside>
  <article class="ss-jew-form-wrap">
    <header>
      <span class="ss-jew-eye">— Members only</span>
      <h3>Sign in to your account.</h3>
    </header>
    <form class="ss-jew-form">
      <label>
        <span class="ss-jew-lbl">Email</span>
        <input
          type="email"
          name="email"
          autocomplete="email"
          placeholder="iris@maison.tld"
          required
        />
      </label>
      <label>
        <span class="ss-jew-lbl">Password</span>
        <input
          type="password"
          name="password"
          autocomplete="current-password"
          placeholder="••••••••••"
          required
        />
      </label>
      <div class="ss-jew-row">
        <label class="ss-jew-check"
          ><input type="checkbox" /> <span>Remember this device</span></label
        >
        <a href="#!">Forgot password</a>
      </div>
      <button type="submit" class="ss-jew-cta">Enter the salon</button>
      <p class="ss-jew-meta">Not a member? <a href="#!">Request an invitation</a></p>
    </form>
  </article>
</section>
```
## CSS
```css
.ss-jew {
  width: 100%;
  display: grid;
  grid-template-columns: 45% 55%;
  min-height: 100vh;
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  background: #fbf6e8;
  color: #1a1612;
  border-radius: 0;
  overflow: hidden;
}

.ss-jew-brand {
  background: radial-gradient(60% 80% at 50% 30%, #1a1612 0%, #0a0806 100%);
  color: #f5e6c8;
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}

.ss-jew-mark {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f3c0a4 0%, #b88a6a 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.18), 0 0 0 6px rgba(243,192,164,0.12);
  position: relative;
}

.ss-jew-mark::after {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid #1a1612;
  border-radius: 50%;
}

.ss-jew-since {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.32em;
  color: #b88a6a;
}

.ss-jew-brand h2 {
  margin: 4px 0 0;
  font-size: clamp(40px, 5.5vw, 64px);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: #f5e6c8;
}

.ss-jew-brand h2 em {
  font-style: italic;
  color: #f3c0a4;
}

.ss-jew-brand p {
  margin: 4px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: #c8b896;
  max-width: 380px;
  font-style: italic;
}

.ss-jew-divider {
  display: block;
  width: 60px;
  height: 1px;
  background: #b88a6a;
  margin-top: 16px;
}

.ss-jew-quote {
  margin-top: auto;
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-style: italic;
  color: #b88a6a;
  letter-spacing: 0.04em;
}

.ss-jew-form-wrap {
  padding: 44px 48px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  background: linear-gradient(180deg, #fff 0%, #fbf6e8 100%);
}

.ss-jew-eye {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #b88a6a;
}

.ss-jew-form-wrap h3 {
  margin: 6px 0 0;
  font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #1a1612;
  line-height: 1.05;
  font-style: italic;
}

.ss-jew-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 400px;
}

.ss-jew-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ss-jew-lbl {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6a4a35;
}

.ss-jew-form input[type="email"],
.ss-jew-form input[type="password"] {
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #c8b896;
  border-radius: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  color: #1a1612;
  font-style: italic;
  transition: border-color 0.14s, box-shadow 0.14s;
}

.ss-jew-form input:focus {
  outline: 0;
  border-color: #b88a6a;
  box-shadow: 0 0 0 3px rgba(184,138,106,0.15);
}

.ss-jew-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #4a3a2a;
}

.ss-jew-check {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.ss-jew-check input {
  accent-color: #b88a6a;
}

.ss-jew-row a {
  color: #b88a6a;
  text-decoration: none;
}

.ss-jew-row a:hover {
  text-decoration: underline;
}

.ss-jew-cta {
  padding: 14px 22px;
  background: #1a1612;
  color: #f5e6c8;
  border: 0;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.16s;
}

.ss-jew-cta:hover {
  background: #b88a6a;
  color: #1a1612;
}

.ss-jew-meta {
  margin: 6px 0 0;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #6a4a35;
  text-align: center;
}

.ss-jew-meta a {
  color: #b88a6a;
  text-decoration: none;
}

.ss-jew-meta a:hover {
  text-decoration: underline;
}

@media (max-width: 720px) {
  .ss-jew {
    grid-template-columns: 1fr;
  }

  .ss-jew-brand {
    padding: 36px 28px;
  }
}
```

How this works

The layout is display: grid with grid-template-columns: 55% 45%. The left panel paints its product hero with a layered background-image stack — a radial-gradient highlight over a linear-gradient base — so it ships without an image asset. Brand copy floats bottom-left via align-self: end on a grid child. The right form panel uses display: flex; flex-direction: column; gap: 1.25rem with inputs styled through :focus-visible rings using outline-offset: 3px. The social row uses display: grid; grid-template-columns: repeat(3, 1fr). Below 52rem the grid collapses; the product panel becomes a short banner and the form takes full width.

Make it yours

  • Swap the champagne/charcoal palette by editing --product-warm, --product-deep, and --ink. The radial highlight relies on a 15-20% luminance jump between the two product colors — flatten it and the panel reads dead.
  • Adjust the split ratio via grid-template-columns. 60% 40% gives the product more presence; 50% 50% feels more transactional. Anything above 65% starts starving the form.
  • Replace the painted gradient with a real product photo by setting a single background-image: url() with background-size: cover. Keep a color underlay for slow-loading states.
  • Restyle inputs by editing border-radius (currently 0.5rem) and padding-block. Luxury forms tend to read better with border-radius: 0 and a 2px underline instead of a full border.

Gotchas — read before shipping

  • Sign-in forms without autocomplete='email' and autocomplete='current-password' break password manager UX. The demo includes them; if you rename the fields, update the attributes.
  • The painted gradient hero looks fine on sRGB monitors but banding shows on wide-gamut displays. Add background-color dithering via a subtle background-image noise layer if you're shipping to design-heavy audiences.
  • Below 52rem the product panel shrinks to a banner and can push the form below the fold. Consider hiding the hero entirely with display: none under 36rem so the form is immediately actionable on phones.

Browser support

ChromeSafariFirefoxEdge
any modernany modernany modernany modern

:focus-visible is Baseline 2022 — older browsers fall back to :focus. No animation. RTL flips via direction: rtl.

Techniques used in this demo

autocomplete tokensMDN ↗radial-gradient()MDN ↗grid-templateMDN ↗clamp()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →