Design for AIRelieve suave
Relieve suave: tarjeta en CSS. Copia las reglas, o el prompt que reproduce el resultado.
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
Construye una tarjeta neumórfica (soft UI) sobre una superficie #e0e5ec: 250px de ancho, mismo fondo #e0e5ec, radio 20px, extruida con sombra doble 9px 9px 18px #bec3c9 y -9px -9px 18px #fff. Dentro, centrado: un círculo de 56px hundido en la superficie con sombras inset (inset 5px 5px 10px #bec3c9, inset -5px -5px 10px #fff), título 17px en #3d4852, texto 13px en #6b7280, y un botón en relieve con la misma sombra doble que se aplana en hover y pasa a inset al pulsarlo.