Generador de Claymorphism
Crea efectos de claymorphism personalizados gratis. Ajusta roundness, opacidad, profundidad, blur de fondo y copia el CSS generado para usar en tus proyectos.
Preview
Configuraciones
35
0.7
8
5
.clay-card {
backdrop-filter: blur(5px);
background-color: rgba(255, 255, 255, 0.7);
border-radius: 35px;
box-shadow:
35px 35px 68px 0px rgba(145, 192, 255, 0.5),
inset -8px -8px 16px 0px rgba(145, 192, 255, 0.6),
inset 0px 11px 28px 0px rgb(255, 255, 255);
}¿Qué es Claymorphism?
Claymorphism es una tendencia de diseño que crea elementos con apariencia de arcilla o masilla, usando sombras suaves y redondeadas para crear una sensación de profundidad y volumen. Este efecto es popular en interfaces modernas y da un aspecto único a tus proyectos.
Características del Claymorphism
- •Elementos con apariencia de arcilla suave
- •Bordes muy redondeados y sombras suaves
- •Crea sensación de volumen y profundidad
- •Ideal para cards, botones y elementos interactivos
- •Funciona bien con colores pasteles y fondos claros
Consejos de Uso
- •Ajusta la redondez para controlar la suavidad
- •La opacidad controla la transparencia del elemento
- •La profundidad ajusta la intensidad de las sombras
- •El desenfoque de fondo crea efecto de profundidad
- •Combina con colores suaves para mejor visualización