Design for AIRelevo suave
Relevo suave: um card em CSS. Copie as regras, ou o prompt que o reconstrói.
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
Construa um card neumórfico (soft UI) sobre uma superfície #e0e5ec: 250px de largura, mesmo fundo #e0e5ec, raio de 20px, extrudado com sombra dupla 9px 9px 18px #bec3c9 e -9px -9px 18px #fff. Dentro, centralizado: um círculo de 56px afundado na superfície com sombras inset (inset 5px 5px 10px #bec3c9, inset -5px -5px 10px #fff), título 17px em #3d4852, texto 13px em #6b7280, e um botão em relevo com a mesma sombra dupla que achata no hover e fica inset quando pressionado.