Design for AISoft embossed
Soft embossed: a CSS card. Copy the rules, or the prompt that rebuilds it.
Soft surface
Extruded from the background with a light and a dark shadow.
CSS
.card-030-bg {
display: inline-block;
padding: 36px;
background: #e0e5ec;
border-radius: 24px
}
.card-030 {
width: 250px;
padding: 26px 22px;
text-align: center;
background: #e0e5ec;
border-radius: 20px;
box-shadow: 9px 9px 18px #bec3c9,-9px -9px 18px #fff;
font-family: system-ui,sans-serif;
color: #3d4852
}
.card-030__icon {
width: 56px;
height: 56px;
margin: 0 auto 14px;
border-radius: 50%;
background: #e0e5ec;
box-shadow: inset 5px 5px 10px #bec3c9,inset -5px -5px 10px #fff
}
.card-030 h3 {
margin: 0 0 6px;
font-size: 17px
}
.card-030 p {
margin: 0 0 18px;
font-size: 13px;
line-height: 1.5;
color: #6b7280
}
.card-030 button {
padding: 10px 22px;
border: 0;
border-radius: 12px;
background: #e0e5ec;
color: #3d4852;
font-weight: 600;
font-size: 13px;
cursor: pointer;
box-shadow: 5px 5px 10px #bec3c9,-5px -5px 10px #fff;
transition: box-shadow .15s
}
.card-030 button:hover {
box-shadow: 3px 3px 6px #bec3c9,-3px -3px 6px #fff
}
.card-030 button:active {
box-shadow: inset 4px 4px 8px #bec3c9,inset -4px -4px 8px #fff
}
.card-030 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
HTML
<div class="card-030-bg">
<article class="card-030">
<div class="card-030__icon"></div>
<h3>Soft surface</h3>
<p>Extruded from the background with a light and a dark shadow.</p>
<button>Press me</button>
</article>
</div>Prompt
Build a neumorphic (soft UI) card on a #e0e5ec surface: 250px wide, same #e0e5ec background, 20px radius, extruded with a dual shadow 9px 9px 18px #bec3c9 and -9px -9px 18px #fff. Inside, centered: a 56px circle pressed into the surface with inset shadows (inset 5px 5px 10px #bec3c9, inset -5px -5px 10px #fff), 17px title in #3d4852, 13px text in #6b7280, and a raised button with the same dual shadow that flattens on hover and becomes inset when pressed.