4Generate
Idiomas:
🇧🇷 PT🇺🇸 EN🇪🇸 ES🇫🇷 FR🇩🇪 DE
Todas las categorías
Ctrl + K

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

Veja também: