13 CSS Neumorphism & Soft UI Designs

Aurum Finance Dashboard

A champagne-toned luxury banking dashboard. The centerpiece is a dark gradient credit card with an animated gold shimmer sweep, an EMV chip with PCB-line detail, masked card-number dots, and a 3D tilt effect on hover. Left column: total balance with up/down change indicator, three stat tiles (Income / Spent / Saved). Right column: three-layer concentric spending ring chart, four category bars, four transactions with debit/credit color coding, and five quick-action buttons including a gold-filled primary CTA. Cormorant Garamond serif for the luxury banking tone. Best for fintech apps, wealth dashboards, banking UIs.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

The code

<section class="nm-fin" aria-label="Aurum Finance Dashboard">
  <div class="card">

    <div class="left-col">
      <div class="tag">Your Card</div>

      <div class="card-wrap">
        <div class="credit-card">
          <div class="card-face" aria-hidden="true"></div>
          <div class="card-shimmer" aria-hidden="true"></div>
          <div class="card-content">

            <div class="card-bank">
              <div>
                <div>AURUM</div>
                <div class="card-bank-sub">Private Banking</div>
              </div>
              <svg class="contactless" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path d="M12 5C8.13 5 5 8.13 5 12s3.13 7 7 7 7-3.13 7-7-3.13-7-7-7z" stroke="rgba(201,168,76,0.7)" stroke-width="1.5" fill="none"/>
                <path d="M12 8.5c-1.93 0-3.5 1.57-3.5 3.5s1.57 3.5 3.5 3.5 3.5-1.57 3.5-3.5S13.93 8.5 12 8.5z" stroke="rgba(201,168,76,0.7)" stroke-width="1.5" fill="none"/>
                <circle cx="12" cy="12" r="1" fill="rgba(201,168,76,0.7)"/>
              </svg>
            </div>

            <div class="chip-wrap">
              <div class="chip" aria-hidden="true"><div class="chip-lines"></div></div>
              <span class="card-nfc" aria-hidden="true">))))</span>
            </div>

            <div class="card-number">
              <span class="masked">••••</span>
              <span class="masked">••••</span>
              <span class="masked">••••</span>
              <span>7291</span>
            </div>

            <div class="card-footer">
              <div>
                <div class="card-holder-label">Card Holder</div>
                <div class="card-holder-name">Alex Mercer</div>
              </div>
              <div>
                <div class="card-expiry-label">Valid Thru</div>
                <div class="card-expiry-val">09/28</div>
              </div>
              <div class="visa-logo">VISA</div>
            </div>

          </div>
        </div>
      </div>

      <div class="balance-card">
        <div class="balance-label">Total Balance</div>
        <div class="balance-amount">
          <span class="currency">$</span>48,290<span class="balance-cents">.50</span>
        </div>
        <div class="balance-change">▲ +$1,240.00 <span class="balance-change-sub">this month</span></div>
      </div>

      <div class="stat-trio">
        <div class="stat-tile">
          <div class="stat-icon" aria-hidden="true">💰</div>
          <div class="stat-val stat-val-grn">$6.8k</div>
          <div class="stat-name">Income</div>
        </div>
        <div class="stat-tile">
          <div class="stat-icon" aria-hidden="true">💸</div>
          <div class="stat-val stat-val-red">$3.2k</div>
          <div class="stat-name">Spent</div>
        </div>
        <div class="stat-tile">
          <div class="stat-icon" aria-hidden="true">🏦</div>
          <div class="stat-val stat-val-gld">$3.6k</div>
          <div class="stat-name">Saved</div>
        </div>
      </div>
    </div>

    <div class="right-col">
      <div class="tag">Spending Overview</div>

      <div class="spend-card">
        <div class="ring-wrap">
          <svg viewBox="0 0 88 88" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <circle cx="44" cy="44" r="36" fill="none" stroke="#e5e0d6" stroke-width="8"/>
            <circle cx="44" cy="44" r="36" fill="none" stroke="#c9a84c" stroke-width="8"
              stroke-linecap="round" stroke-dasharray="162 226" transform="rotate(-90 44 44)"/>
            <circle cx="44" cy="44" r="26" fill="none" stroke="#e5e0d6" stroke-width="6"/>
            <circle cx="44" cy="44" r="26" fill="none" stroke="#c05858" stroke-width="6"
              stroke-linecap="round" stroke-dasharray="98 163" transform="rotate(-90 44 44)"/>
            <circle cx="44" cy="44" r="17" fill="none" stroke="#e5e0d6" stroke-width="5"/>
            <circle cx="44" cy="44" r="17" fill="none" stroke="#4a8a5a" stroke-width="5"
              stroke-linecap="round" stroke-dasharray="60 107" transform="rotate(-90 44 44)"/>
          </svg>
          <div class="ring-center">
            <div class="ring-pct">72%</div>
            <div class="ring-sub">Budget</div>
          </div>
        </div>
        <div class="spend-info">
          <div class="spend-cats">
            <div class="cat-row">
              <div class="cat-dot cat-dot-gld" aria-hidden="true"></div>
              <div class="cat-name">Housing</div>
              <div class="cat-bar-wrap"><div class="cat-bar cat-bar-gld" style="width:72%"></div></div>
              <div class="cat-amt">$1,440</div>
            </div>
            <div class="cat-row">
              <div class="cat-dot cat-dot-red" aria-hidden="true"></div>
              <div class="cat-name">Food</div>
              <div class="cat-bar-wrap"><div class="cat-bar cat-bar-red" style="width:43%"></div></div>
              <div class="cat-amt">$860</div>
            </div>
            <div class="cat-row">
              <div class="cat-dot cat-dot-grn" aria-hidden="true"></div>
              <div class="cat-name">Transport</div>
              <div class="cat-bar-wrap"><div class="cat-bar cat-bar-grn" style="width:27%"></div></div>
              <div class="cat-amt">$320</div>
            </div>
            <div class="cat-row">
              <div class="cat-dot cat-dot-txt" aria-hidden="true"></div>
              <div class="cat-name">Other</div>
              <div class="cat-bar-wrap"><div class="cat-bar cat-bar-txt" style="width:18%"></div></div>
              <div class="cat-amt">$240</div>
            </div>
          </div>
        </div>
      </div>

      <div class="tx-card">
        <div class="tag">Recent Transactions</div>
        <div class="tx-list">
          <div class="tx-item">
            <div class="tx-icon-wrap" aria-hidden="true">🛒</div>
            <div class="tx-meta">
              <div class="tx-name">Whole Foods Market</div>
              <div class="tx-date">Today · 2:34 PM</div>
            </div>
            <div class="tx-amount">
              <div class="tx-val debit">−$84.20</div>
              <div class="tx-cat">Groceries</div>
            </div>
          </div>
          <div class="tx-item">
            <div class="tx-icon-wrap" aria-hidden="true">💼</div>
            <div class="tx-meta">
              <div class="tx-name">Salary Deposit</div>
              <div class="tx-date">Yesterday · 9:00 AM</div>
            </div>
            <div class="tx-amount">
              <div class="tx-val credit">+$3,400</div>
              <div class="tx-cat">Income</div>
            </div>
          </div>
          <div class="tx-item">
            <div class="tx-icon-wrap" aria-hidden="true">☕</div>
            <div class="tx-meta">
              <div class="tx-name">Blue Bottle Coffee</div>
              <div class="tx-date">May 21 · 8:15 AM</div>
            </div>
            <div class="tx-amount">
              <div class="tx-val debit">−$7.50</div>
              <div class="tx-cat">Dining</div>
            </div>
          </div>
          <div class="tx-item">
            <div class="tx-icon-wrap" aria-hidden="true">✈️</div>
            <div class="tx-meta">
              <div class="tx-name">United Airlines</div>
              <div class="tx-date">May 20 · 11:42 AM</div>
            </div>
            <div class="tx-amount">
              <div class="tx-val debit">−$342.00</div>
              <div class="tx-cat">Travel</div>
            </div>
          </div>
        </div>
      </div>

      <div class="actions-row">
        <button type="button" class="action-btn accent">
          <span class="action-icon" aria-hidden="true">→</span>
          <span class="action-name">Send</span>
        </button>
        <button type="button" class="action-btn">
          <span class="action-icon" aria-hidden="true">←</span>
          <span class="action-name">Request</span>
        </button>
        <button type="button" class="action-btn">
          <span class="action-icon" aria-hidden="true">+</span>
          <span class="action-name">Top Up</span>
        </button>
        <button type="button" class="action-btn">
          <span class="action-icon" aria-hidden="true">⇄</span>
          <span class="action-name">Transfer</span>
        </button>
        <button type="button" class="action-btn">
          <span class="action-icon" aria-hidden="true">📄</span>
          <span class="action-name">Statement</span>
        </button>
      </div>
    </div>

  </div>
</section>
/* ─── 08 Aurum Finance Dashboard — champagne luxury banking ───────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Josefin+Sans:wght@300;400;600&display=swap');

.nm-fin {
  --nm-fin-bg:  #ede8df;
  --nm-fin-sd:  #cdc8bc;
  --nm-fin-sl:  #fff8f0;
  --nm-fin-ib:  #e5e0d6;
  --nm-fin-gld: #c9a84c;
  --nm-fin-gl2: #e8c870;
  --nm-fin-gl3: #9a7a2c;
  --nm-fin-txt: #7a7268;
  --nm-fin-txt2:#2a2018;
  --nm-fin-red: #c05858;
  --nm-fin-grn: #4a8a5a;
  --nm-fin-neu:       10px 10px 24px var(--nm-fin-sd), -10px -10px 24px var(--nm-fin-sl);
  --nm-fin-neu-in:    inset 7px 7px 16px var(--nm-fin-sd), inset -7px -7px 16px var(--nm-fin-sl);
  --nm-fin-neu-sm:    6px 6px 14px var(--nm-fin-sd), -6px -6px 14px var(--nm-fin-sl);
  --nm-fin-neu-sm-in: inset 4px 4px 10px var(--nm-fin-sd), inset -4px -4px 10px var(--nm-fin-sl);

  position: relative;
  width: 100%;
  min-height: 940px;
  background: var(--nm-fin-bg);
  font-family: 'Josefin Sans', system-ui, sans-serif;
  color: var(--nm-fin-txt);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  overflow: hidden;
  box-sizing: border-box;
}

.nm-fin *,
.nm-fin *::before,
.nm-fin *::after { box-sizing: border-box; }

.nm-fin .card {
  position: relative;
  width: 100%;
  max-width: 860px;
  background: var(--nm-fin-bg);
  border-radius: 44px;
  padding: 40px 36px;
  box-shadow: 22px 22px 54px var(--nm-fin-sd), -22px -22px 54px var(--nm-fin-sl);
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 28px;
}

.nm-fin .tag {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--nm-fin-txt);
  opacity: 0.5;
  margin-bottom: 16px;
}

.nm-fin .left-col,
.nm-fin .right-col {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Credit card */
.nm-fin .card-wrap {
  position: relative;
  perspective: 800px;
}
.nm-fin .credit-card {
  width: 100%;
  height: 200px;
  border-radius: 22px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 16px 16px 36px rgba(0, 0, 0, 0.28), -8px -8px 20px rgba(255, 255, 255, 0.06);
}
.nm-fin .card-wrap:hover .credit-card { transform: rotateY(6deg) rotateX(-3deg); }

.nm-fin .card-face {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1a1628 0%, #2a2040 40%, #1e1430 70%, #2e2848 100%);
}
.nm-fin .card-face::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.5;
}
.nm-fin .card-shimmer {
  position: absolute;
  top: -50%;
  left: -60%;
  width: 50%;
  height: 200%;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(201, 168, 76, 0.04) 40%,
    rgba(232, 200, 112, 0.12) 50%,
    rgba(201, 168, 76, 0.04) 60%,
    transparent 100%);
  transform: skewX(-15deg);
  animation: nm-fin-shimmer 4s ease-in-out infinite;
}
@keyframes nm-fin-shimmer {
  0%, 100% { left: -60%; }
  50% { left: 110%; }
}

.nm-fin .card-content {
  position: absolute;
  inset: 0;
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.nm-fin .card-bank {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nm-fin .card-bank-sub {
  font-family: 'Josefin Sans', system-ui, sans-serif;
  font-size: 8px;
  letter-spacing: 4px;
  color: rgba(201, 168, 76, 0.8);
  text-transform: uppercase;
  margin-top: 2px;
}
.nm-fin .contactless { width: 24px; height: 24px; opacity: 0.7; }

.nm-fin .chip-wrap { display: flex; align-items: center; gap: 16px; }
.nm-fin .chip {
  width: 44px;
  height: 34px;
  border-radius: 6px;
  background: linear-gradient(145deg, #e8c870, #b88a30, #e0c060, #c8a040);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.4), 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.nm-fin .chip::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 20px;
  border: 1.5px solid rgba(180, 140, 40, 0.6);
  border-radius: 3px;
}
.nm-fin .chip::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(180, 140, 40, 0.5);
  transform: translateY(-50%);
}
.nm-fin .chip-lines {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1.5px;
  background: rgba(180, 140, 40, 0.5);
}
.nm-fin .card-nfc {
  opacity: 0.5;
  font-size: 18px;
  color: rgba(201, 168, 76, 0.8);
}

.nm-fin .card-number {
  font-family: 'Josefin Sans', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 300;
  letter-spacing: 4px;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  gap: 18px;
}
.nm-fin .card-number .masked {
  letter-spacing: 3px;
  color: rgba(201, 168, 76, 0.6);
}

.nm-fin .card-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.nm-fin .card-holder-label,
.nm-fin .card-expiry-label {
  font-size: 8px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(201, 168, 76, 0.5);
  margin-bottom: 3px;
}
.nm-fin .card-expiry-label { text-align: right; }
.nm-fin .card-holder-name,
.nm-fin .card-expiry-val {
  font-family: 'Josefin Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
}
.nm-fin .card-expiry-val { text-align: right; }
.nm-fin .visa-logo {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 26px;
  font-style: italic;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: -1px;
}

/* Balance card */
.nm-fin .balance-card {
  background: var(--nm-fin-bg);
  border-radius: 24px;
  padding: 20px 22px;
  box-shadow: var(--nm-fin-neu-in);
}
.nm-fin .balance-label {
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--nm-fin-txt);
  margin-bottom: 8px;
}
.nm-fin .balance-amount {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 38px;
  font-weight: 700;
  color: var(--nm-fin-txt2);
  letter-spacing: -1px;
  line-height: 1;
}
.nm-fin .balance-amount .currency { font-size: 22px; color: var(--nm-fin-gld); }
.nm-fin .balance-cents { font-size: 22px; color: var(--nm-fin-txt); }
.nm-fin .balance-change {
  font-size: 12px;
  font-weight: 600;
  margin-top: 6px;
  color: var(--nm-fin-grn);
  display: flex;
  align-items: center;
  gap: 6px;
}
.nm-fin .balance-change-sub { color: var(--nm-fin-txt); font-weight: 400; }

/* Stat trio */
.nm-fin .stat-trio { display: flex; gap: 12px; }
.nm-fin .stat-tile {
  flex: 1;
  background: var(--nm-fin-bg);
  border-radius: 18px;
  padding: 14px 12px;
  box-shadow: var(--nm-fin-neu-sm);
  text-align: center;
}
.nm-fin .stat-icon { font-size: 18px; margin-bottom: 6px; }
.nm-fin .stat-val {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--nm-fin-txt2);
}
.nm-fin .stat-val-grn { color: var(--nm-fin-grn); }
.nm-fin .stat-val-red { color: var(--nm-fin-red); }
.nm-fin .stat-val-gld { color: var(--nm-fin-gld); }
.nm-fin .stat-name {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--nm-fin-txt);
  margin-top: 2px;
}

/* Right column: spending rings */
.nm-fin .spend-card {
  background: var(--nm-fin-bg);
  border-radius: 24px;
  padding: 20px;
  box-shadow: var(--nm-fin-neu);
  display: flex;
  gap: 20px;
  align-items: center;
}
.nm-fin .ring-wrap {
  position: relative;
  width: 88px;
  height: 88px;
  flex-shrink: 0;
}
.nm-fin .ring-wrap svg { width: 100%; height: 100%; }
.nm-fin .ring-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.nm-fin .ring-pct {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--nm-fin-txt2);
}
.nm-fin .ring-sub {
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--nm-fin-txt);
}
.nm-fin .spend-info { flex: 1; }
.nm-fin .spend-cats { display: flex; flex-direction: column; gap: 8px; }
.nm-fin .cat-row { display: flex; align-items: center; gap: 10px; }
.nm-fin .cat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.nm-fin .cat-dot-gld { background: var(--nm-fin-gld); }
.nm-fin .cat-dot-red { background: var(--nm-fin-red); }
.nm-fin .cat-dot-grn { background: var(--nm-fin-grn); }
.nm-fin .cat-dot-txt { background: var(--nm-fin-txt); }
.nm-fin .cat-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--nm-fin-txt2);
  flex: 1;
}
.nm-fin .cat-bar-wrap {
  flex: 2;
  height: 5px;
  border-radius: 3px;
  background: var(--nm-fin-ib);
  box-shadow: var(--nm-fin-neu-sm-in);
}
.nm-fin .cat-bar { height: 100%; border-radius: 3px; }
.nm-fin .cat-bar-gld { background: var(--nm-fin-gld); }
.nm-fin .cat-bar-red { background: var(--nm-fin-red); }
.nm-fin .cat-bar-grn { background: var(--nm-fin-grn); }
.nm-fin .cat-bar-txt { background: var(--nm-fin-txt); }
.nm-fin .cat-amt {
  font-size: 11px;
  color: var(--nm-fin-txt);
  font-weight: 600;
  font-family: 'Josefin Sans', system-ui, sans-serif;
  width: 50px;
  text-align: right;
}

/* Transactions */
.nm-fin .tx-card {
  background: var(--nm-fin-bg);
  border-radius: 24px;
  padding: 20px;
  box-shadow: var(--nm-fin-neu);
  flex: 1;
}
.nm-fin .tx-list { display: flex; flex-direction: column; gap: 2px; }
.nm-fin .tx-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 14px;
  transition: all 0.2s;
  cursor: pointer;
}
.nm-fin .tx-item:hover {
  background: var(--nm-fin-ib);
  box-shadow: var(--nm-fin-neu-sm-in);
}
.nm-fin .tx-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--nm-fin-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: var(--nm-fin-neu-sm);
  flex-shrink: 0;
}
.nm-fin .tx-meta { flex: 1; }
.nm-fin .tx-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--nm-fin-txt2);
}
.nm-fin .tx-date {
  font-size: 10px;
  color: var(--nm-fin-txt);
  margin-top: 2px;
  letter-spacing: 0.3px;
}
.nm-fin .tx-amount { text-align: right; }
.nm-fin .tx-val {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 16px;
  font-weight: 700;
}
.nm-fin .tx-val.debit  { color: var(--nm-fin-red); }
.nm-fin .tx-val.credit { color: var(--nm-fin-grn); }
.nm-fin .tx-cat {
  font-size: 9px;
  color: var(--nm-fin-txt);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 2px;
}

/* Quick actions */
.nm-fin .actions-row { display: flex; gap: 10px; flex-wrap: wrap; }
.nm-fin .action-btn {
  flex: 1;
  min-width: 80px;
  background: var(--nm-fin-bg);
  border: none;
  cursor: pointer;
  border-radius: 18px;
  padding: 14px 10px 12px;
  box-shadow: var(--nm-fin-neu-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: all 0.18s ease;
  font-family: 'Josefin Sans', system-ui, sans-serif;
}
.nm-fin .action-btn:hover {
  box-shadow: 8px 8px 18px var(--nm-fin-sd), -8px -8px 18px var(--nm-fin-sl);
  transform: translateY(-1px);
}
.nm-fin .action-btn:active {
  box-shadow: var(--nm-fin-neu-sm-in);
  transform: scale(0.97);
}
.nm-fin .action-icon { font-size: 20px; }
.nm-fin .action-name {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--nm-fin-txt);
}
.nm-fin .action-btn.accent {
  background: linear-gradient(145deg, var(--nm-fin-gld), var(--nm-fin-gl3));
  box-shadow: 8px 8px 18px rgba(180, 130, 40, 0.3), -6px -6px 14px var(--nm-fin-sl);
}
.nm-fin .action-btn.accent .action-name,
.nm-fin .action-btn.accent .action-icon { color: rgba(255, 248, 220, 0.9); }
.nm-fin .action-btn.accent:active { box-shadow: inset 4px 4px 10px rgba(0, 0, 0, 0.2); }

@media (max-width: 880px) {
  .nm-fin .card { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .nm-fin .card-shimmer,
  .nm-fin .credit-card,
  .nm-fin .action-btn { transition: none; animation: none; }
  .nm-fin .card-wrap:hover .credit-card { transform: none; }
}

More from 13 CSS Neumorphism & Soft UI Designs

Aurum Profile & TestimonialBreatheVinyl PlayerNexusSoft UI Button LabAudio Control SuiteSunken Form StudioSmart IoT Control PanelSoft UI CalculatorSky WidgetsDark Mode NeumorphismSoft UI Form Controls
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →