Générateur de Claymorphism

Créez des effets de claymorphism personnalisés gratuitement. Ajustez roundness, opacity, depth, background blur et copiez le CSS généré pour l'utiliser dans vos projets.

Preview

Paramètres

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'est-ce que le Claymorphism ?

Le claymorphism est une tendance de design qui crée des éléments avec une apparence de pâte à modeler ou d'argile, utilisant des ombres douces et arrondies pour créer une sensation de profondeur et de volume. Cet effet est populaire dans les interfaces modernes et donne un look unique à vos projets.

Caractéristiques du Claymorphism

  • Éléments avec apparence d'argile douce
  • Bordures très arrondies et ombres douces
  • Crée une sensation de volume et de profondeur
  • Idéal pour les cartes, boutons et éléments interactifs
  • Fonctionne bien avec des couleurs pastel et des arrière-plans clairs

Conseils d'Utilisation

  • Ajustez l'arrondi pour contrôler la douceur
  • L'opacité contrôle la transparence de l'élément
  • La profondeur ajuste l'intensité des ombres
  • Le flou d'arrière-plan crée un effet de profondeur
  • Combinez avec des couleurs douces pour une meilleure visualisation