20 CSS Profile Cards12 / 20

Pure CSSMIT licensed

Neumorphic Soft-Shadow User Profile

A soft-UI profile card built entirely from dual light/dark box-shadows, with an extruded avatar, inset stat wells and a button that presses inward on click.

Published

Live Demo
Try it

The code

<div class="pc-12">
  <div class="pc-12__card">
    <div class="pc-12__pfp">GS</div>
    <h3>Grace Sullivan</h3>
    <p class="pc-12__role">UX Researcher</p>
    <p class="pc-12__bio">Turning user interviews into product clarity for fintech teams.</p>
    <div class="pc-12__row">
      <div class="pc-12__stat"><b>84</b><span>Studies</span></div>
      <div class="pc-12__stat"><b>15</b><span>Years</span></div>
    </div>
    <button class="pc-12__cta">Get in touch</button>
  </div>
</div>
.pc-12,
.pc-12 *,
.pc-12 *::before,
.pc-12 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.pc-12 ::selection {
  background: #a3b1c6;
  color: #fff;
}

.pc-12 {
  font-family: 'Segoe UI',system-ui,sans-serif;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  background: #e0e5ec;
  color: #3a4256;
}

.pc-12__card {
  width: 300px;
  padding: 34px 28px;
  text-align: center;
  border-radius: 28px;
  background: #e0e5ec;
  box-shadow: 12px 12px 24px #b8bec9,-12px -12px 24px #ffffff;
}

.pc-12__pfp {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.7rem;
  color: #5b6478;
  background: #e0e5ec;
  box-shadow: inset 6px 6px 12px #b8bec9,inset -6px -6px 12px #ffffff;
}

.pc-12__card h3 {
  font-size: 1.4rem;
  font-weight: 800;
  color: #2e3546;
}

.pc-12__role {
  font-size: .86rem;
  color: #8992a5;
  margin-top: 3px;
}

.pc-12__bio {
  font-size: .84rem;
  line-height: 1.5;
  color: #6b7488;
  margin-top: 14px;
  text-wrap: balance;
}

.pc-12__row {
  display: flex;
  gap: 14px;
  margin: 22px 0;
}

.pc-12__stat {
  flex: 1;
  padding: 14px 8px;
  border-radius: 16px;
  background: #e0e5ec;
  box-shadow: inset 4px 4px 8px #b8bec9,inset -4px -4px 8px #ffffff;
}

.pc-12__stat b {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
  color: #2e3546;
}

.pc-12__stat span {
  font-size: .68rem;
  color: #8992a5;
}

.pc-12__cta {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  font-weight: 700;
  font-size: .88rem;
  color: #5b6478;
  background: #e0e5ec;
  box-shadow: 6px 6px 12px #b8bec9,-6px -6px 12px #ffffff;
  transition: box-shadow .2s,color .2s;
}

.pc-12__cta:hover {
  color: #4a7cff;
}

.pc-12__cta:active {
  box-shadow: inset 5px 5px 10px #b8bec9,inset -5px -5px 10px #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  .pc-12 * {
    transition: none!important;
  }
}
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 Profile Card 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: Neumorphic Soft-Shadow User Profile
Source: https://codefronts.com/components/css-profile-cards/neumorphic-soft-shadow-user-profile/

A soft-UI profile card built entirely from dual light/dark box-shadows, with an extruded avatar, inset stat wells and a button that presses inward on click.
## HTML
```html
<div class="pc-12">
  <div class="pc-12__card">
    <div class="pc-12__pfp">GS</div>
    <h3>Grace Sullivan</h3>
    <p class="pc-12__role">UX Researcher</p>
    <p class="pc-12__bio">Turning user interviews into product clarity for fintech teams.</p>
    <div class="pc-12__row">
      <div class="pc-12__stat"><b>84</b><span>Studies</span></div>
      <div class="pc-12__stat"><b>15</b><span>Years</span></div>
    </div>
    <button class="pc-12__cta">Get in touch</button>
  </div>
</div>
```
## CSS
```css
.pc-12,
.pc-12 *,
.pc-12 *::before,
.pc-12 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.pc-12 ::selection {
  background: #a3b1c6;
  color: #fff;
}

.pc-12 {
  font-family: 'Segoe UI',system-ui,sans-serif;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  background: #e0e5ec;
  color: #3a4256;
}

.pc-12__card {
  width: 300px;
  padding: 34px 28px;
  text-align: center;
  border-radius: 28px;
  background: #e0e5ec;
  box-shadow: 12px 12px 24px #b8bec9,-12px -12px 24px #ffffff;
}

.pc-12__pfp {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.7rem;
  color: #5b6478;
  background: #e0e5ec;
  box-shadow: inset 6px 6px 12px #b8bec9,inset -6px -6px 12px #ffffff;
}

.pc-12__card h3 {
  font-size: 1.4rem;
  font-weight: 800;
  color: #2e3546;
}

.pc-12__role {
  font-size: .86rem;
  color: #8992a5;
  margin-top: 3px;
}

.pc-12__bio {
  font-size: .84rem;
  line-height: 1.5;
  color: #6b7488;
  margin-top: 14px;
  text-wrap: balance;
}

.pc-12__row {
  display: flex;
  gap: 14px;
  margin: 22px 0;
}

.pc-12__stat {
  flex: 1;
  padding: 14px 8px;
  border-radius: 16px;
  background: #e0e5ec;
  box-shadow: inset 4px 4px 8px #b8bec9,inset -4px -4px 8px #ffffff;
}

.pc-12__stat b {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
  color: #2e3546;
}

.pc-12__stat span {
  font-size: .68rem;
  color: #8992a5;
}

.pc-12__cta {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  font-weight: 700;
  font-size: .88rem;
  color: #5b6478;
  background: #e0e5ec;
  box-shadow: 6px 6px 12px #b8bec9,-6px -6px 12px #ffffff;
  transition: box-shadow .2s,color .2s;
}

.pc-12__cta:hover {
  color: #4a7cff;
}

.pc-12__cta:active {
  box-shadow: inset 5px 5px 10px #b8bec9,inset -5px -5px 10px #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  .pc-12 * {
    transition: none!important;
  }
}
```

How this works

Neumorphism comes from pairing two shadows on the same monochrome background: a light shadow from the top-left and a dark one from the bottom-right make elements appear extruded from the surface. Swapping both shadows to inset flips the effect, so the avatar and stat wells look pressed into the card.

The primary button reads as raised at rest and switches to inset shadows on :active, giving a physical push. Because everything shares one base colour and only shadows differ, the whole card feels sculpted from a single material.

Make it yours

  • Retint the whole surface by changing the shared background colour and both shadow colours together.
  • Deepen or flatten the relief by scaling the shadow offsets and blur (e.g. 12px 12px 24px).
  • Make any element sunken by switching its shadows to inset, or raised by removing inset.
  • Change the pressed feel by editing the :active inset shadows on the button.

Gotchas — read before shipping

  • Neumorphism needs low contrast between element and background, which can fail WCAG text-contrast — keep labels dark enough.
  • The effect only reads on a mid-tone background; pure white or black kills the dual-shadow illusion.
  • Both shadow colours must derive from the same base or the material looks inconsistent under different light directions.

Browser support

ChromeSafariFirefoxEdge
114+17.5+121+114+

Floor set by text-wrap as this demo is written. The core technique itself goes back further — Chrome 49+.

Only multi-layer box-shadow is required; universally supported.

Techniques used in this demo

text-wrap: prettyMDN ↗place-items / place-contentMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →