Fondamentaux

Boutons Texte & Typo Formulaires Navigation & UI Chargement

Design & Visuels

Backgrounds Glass & Morphism Effets Visuels Liquid & Morphing SVG & Art

Animations & Scroll

Scroll & Parallax Transitions Hover & Interactions 3D & Profondeur Curseurs

Galerie & Plus

Cartes & Layouts Galerie & Média Data & Visualisation Atmosphère Utilitaires
Tous les effets Nouveautés Favoris Templates Blog Astuces ✨ Passer Premium
Glassmorphism✨ Premium

Claymorphism

Une carte en pâte à modeler de 260 × 278 px : fond pastel en dégradé, ombre interne claire en haut à gauche et sombre en bas à droite, grands arrondis de 28 px, icône et bouton violets à ombre colorée ; au survol, la carte se soulève de 4 px et son ombre s'allonge, le bouton grossit de 5 %. 100 % CSS.

CSSClay3D

Mis à jour le

Claymorphism — aperçu ▶ Aperçu en direct avec un compte gratuit

Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Glassmorphism comprend 47 effets, dont 6 gratuits. Découvrir la catégorie →

Voir dans le catalogue

3 exemples d'usage

Défi lecture du jour — appli d'apprentissage de la lecture pour CP — Claymorphism exemple 1

① Défi lecture du jour — appli d'apprentissage de la lecture pour CP

QuandL'enfant ouvre la carte du jour : le son « ou » à trouver dans trois images, et un gros bouton « Commencer ». À côté, la liste de ses défis de la semaine.
PourquoiLa matière jouet rassure : la carte a l'air d'un objet qu'on prend dans la main, pas d'un écran de travail. Le bouton violet, bombé et ombré de violet, se repère tout de suite au milieu d'une page sans autre couleur vive.
RéglagesCode d'origine sans changement : carte de 260 px, dégradé lilas, icône et bouton violets ; seul le pictogramme SVG change (un haut-parleur). Fond de scène lilas clair #ede4f8, celui du cadre vendu, pour que l'ombre portée se voie.
Carte d'un animal à adopter — jeu de ferme sur tablette — Claymorphism exemple 2

② Carte d'un animal à adopter — jeu de ferme sur tablette

QuandLe joueur reçoit un nouvel animal : Noisette, une chèvre naine, avec un conseil pour son enclos et un bouton « Adopter Noisette ».
PourquoiL'aspect pâte à modeler colle au monde du jeu, fait de collines et de barrières arrondies ; la carte qui se soulève sous le doigt invite à la prendre. Une ombre colorée sous le bouton le relie à l'icône.
RéglagesPalette passée au vert : carte #f0fbe9 → #dcf3cf, icône #22c55e → #16a34a, bouton #16a34a → #15803d, ombres colorées rgba(22,163,74,.3), titre #14532d (7,7:1), texte #166534 (6,0:1). Géométrie et ombres internes inchangées. Une pastille « Nouvel animal » est posée sur le bord haut de la carte.
Carte « Mon premier semis » — appli compagnon d'un kit de jardinage pour enfants — Claymorphism exemple 3

③ Carte « Mon premier semis » — appli compagnon d'un kit de jardinage pour enfants

QuandJour 6 du semis : la carte demande d'arroser les radis avec un petit verre d'eau et propose un gros bouton « C'est fait ! ». À droite, les pousses des sept jours.
PourquoiLa matière pâte à modeler parle aux 5-8 ans et le bouton en volume se touche sans hésiter. Le bleu de l'eau sur l'icône et le bouton dit la consigne avant même la lecture.
RéglagesPalette passée au bleu : carte #eef5ff → #dbe8fb, icône #3b82f6 → #2563eb, bouton #2563eb → #1d4ed8 (blanc à 5,2:1 au plus clair), titre #1e3a8a, texte #1d4ed8 (5,4:1). Fond de ciel et de terre en dégradés clairs, pour garder l'ombre portée visible.

Comment ça marche

Le claymorphisme inverse le neumorphisme : au lieu d'une surface creusée dans le fond, un objet bombé posé dessus. La carte .neu-clay-card (260 px, padding: 28px, border-radius: 28px, colonne flex centrée avec 14 px d'écart) cumule trois ombres : une ombre portée rgba(0,0,0,.12) 8px 8px 20px qui la détache du fond, une ombre interne sombre rgba(0,0,0,.06) -4px -4px 8px inset qui assombrit son bord bas-droit, et une ombre interne blanche rgba(255,255,255,.8) 4px 4px 8px inset qui éclaire son bord haut-gauche — c'est ce double reflet intérieur qui donne le volume « pâte à modeler ». Le fond est un dégradé pastel 135deg #f0e6ff → #e8d5f5, cerné d'une bordure blanche à 60 % de 2 px. L'icône (64 × 64 px, rayon 20 px, dégradé #8b5cf6 → #a78bfa) et le bouton (rayon 14 px, dégradé #8b5cf6 → #7c3aed) reprennent le même jeu d'ombres internes, avec une ombre portée colorée rgba(139,92,246,.3) 4px 4px 12px : un objet violet projette une ombre violette.

Le survol est en deux temps, mesuré dans Chromium 151, Firefox 153 et WebKit 26.5. Sur la carte, transform: translateY(-4px) et une ombre portée plus longue et plus dense (12px 12px 28px à 15 %) en transition: .3s : la carte monte vers l'utilisateur. Sur le bouton, scale(1.05) au survol et scale(.98) à l'appui, en 0,2 s. Le titre est en 16 px graisse 700, #4c1d95 ; le texte en 13,1 px, #7c3aed, centré ; l'icône est un SVG en ligne de 30 px rempli de blanc. Aucun JavaScript, aucune ressource externe.

Le cadre .demo-preview déclare un fond lilas clair #ede4f8 et 32 px de marge verticale, parce que le claymorphisme vit de son ombre : sur un cadre noir #0a0a0f, l'ombre portée noire à 12 % ne se verrait pas (1,01:1 entre l'ombre et le fond, mesuré) et le soulèvement au survol se réduirait à un déplacement de 4 px sans ombre. Sur le lilas, l'ombre atteint 1,30:1 à son point le plus sombre et la carte se détache. Rien n'est imposé à body : sur votre page, posez la carte sur un fond clair, de préférence pastel.

Accessibilité

  • Contraste : le titre #4c1d95 mesure 9,1:1 en haut de la carte et 8,0:1 en bas. Le texte #7c3aed fait 4,7:1 sur #f0e6ff mais 4,1:1 sur #e8d5f5, l'extrémité basse du dégradé, là où il se trouve : passez-le en #6d28d9 (5,2:1). Le texte blanc du bouton mesure 4,2:1 sur #8b5cf6 et 5,7:1 sur #7c3aed : en 13,6 px graisse 600, la moitié claire est sous le seuil de 4,5:1 — #7c3aed → #6d28d9 règle la question.
  • Clavier : le bouton est un vrai <button>, atteignable au Tab, avec l'anneau de focus du navigateur. La carte, elle, ne réagit qu'à la souris : elle porte cursor: pointer sans être un lien ni un bouton. Si toute la carte doit être cliquable, mettez le lien sur le titre et étendez sa zone (::after en position: absolute; inset: 0), puis ajoutez .neu-clay-card:focus-within à la règle du survol pour que la carte se soulève aussi au clavier.
  • Action du bouton : le bouton n'a ni type ni gestionnaire. Placé dans un formulaire, il l'envoie (type submit par défaut) ; ailleurs, il ne fait rien. Ajoutez type="button" et votre clic, ou remplacez-le par un <a href> s'il mène à une page. L'icône SVG n'a pas de texte : laissez-lui aria-hidden="true" (fait dans les scènes) ou donnez-lui un <title> si elle porte un sens.
  • Mouvement : 4 px de montée et 5 % d'agrandissement, uniquement au survol, sans boucle. C'est sous les seuils qui gênent les personnes sensibles au mouvement ; pour respecter quand même la préférence : @media (prefers-reduced-motion: reduce) { .neu-clay-card, .neu-clay-btn { transition: none; transform: none !important } } — l'ombre plus longue suffit à signaler le survol.

Compatibilité navigateur

CSS seul : box-shadow multiples dont deux inset, linear-gradient, border-radius, transform, transition, flexbox, SVG en ligne. Zéro JavaScript, zéro dépendance. Mesuré collé dans une page vierge dans Chromium 151, Firefox 153 et le WebKit 26.5 de Playwright : mêmes ombres calculées au repos et au survol, même translateY(-4px). Le titre demande Inter ; sans elle, le navigateur prend sa police sans empattement par défaut.

Chrome 36+✓ Complet
Firefox 16+✓ Complet
Safari 9+✓ Complet
Edge 12+✓ Complet
Mobile iOS✓ Complet (pas de survol : la carte reste à plat, le bouton réagit à l'appui)
Android Chrome✓ Complet (pas de survol)

Sur écran tactile, il n'y a pas de survol : la carte garde son ombre de repos, ce qui suffit à la lire comme un objet ; le scale(.98) du bouton à l'appui reste visible. Dans un navigateur sans transition, les changements se font d'un coup, sans perte d'information.

Le code

Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :

index.html — structure 
<div class="demo-preview">
  <div class="neu-clay-scene">
    <div class="neu-clay-card">
      <div class="neu-clay-icon">
        <svg viewBox="0 0 24 24"><path d="…"></path></svg>
      </div>
      <h3>…</h3>
      <p>…</p>
      <button class="neu-clay-btn">…</button>
    </div>
  </div>
</div>
Débloquer le code complet — 9,90 € TTC/mois

Le code complet HTML + CSS + JS de Claymorphism, prêt à coller — et les 840 effets. Ou 299 € TTC une fois, accès à vie.

Personnaliser

Options passées à l'API ou attributs data-* :

Option / propriétéDéfautEffet
Teinte de la carte (CSS — .neu-clay-card { background: linear-gradient(135deg, #f0e6ff, #e8d5f5) }) lilas #f0e6ff → #e8d5f5 Gardez deux pastels proches (écart de 5 à 8 % de luminosité) : un dégradé plus marqué casse l'impression de matière unie. Changez la couleur du texte en même temps et vérifiez 4,5:1 sur la teinte la plus foncée.
Couleur d'accent (CSS — dégradés de .neu-clay-icon et .neu-clay-btn, et leur ombre rgba(139,92,246,.3)) violet #8b5cf6 → #a78bfa / #7c3aed Changez le dégradé ET la couleur de l'ombre portée : une ombre restée violette sous un bouton vert trahit le trucage. Vert et bleu des scènes : rgba(22,163,74,.3), rgba(37,99,235,.3).
Volume (CSS — ombres inset de la carte : -4px -4px 8px à 6 %, 4px 4px 8px blanc à 80 %) 4 px / 8 px de flou 6 px / 12 px rendent la carte plus bombée ; au-delà, le reflet blanc empiète sur le contenu. Sans ces deux ombres internes, il ne reste qu'une carte pastel ordinaire.
Arrondis (CSS — border-radius : carte 28 px, icône 20 px, bouton 14 px) 28 / 20 / 14 px Le style vit des grands rayons : gardez la carte au-dessus de 24 px. Un rayon d'icône à 50 % donne une pastille ronde, toujours cohérente.
Survol (CSS — .neu-clay-card:hover { transform: translateY(-4px) }, .neu-clay-btn:hover { transform: scale(1.05) }) −4 px en 0,3 s · ×1,05 en 0,2 s −6 px avec une ombre de 16 px 16 px 32 px pour un effet plus joueur ; supprimez la règle de la carte si elle n'est pas cliquable, pour ne pas promettre une action.
Fond de la page (CSS — .demo-preview { background: #ede4f8 }) #ede4f8 (lilas clair), marge verticale 32 px Tout fond clair convient ; un pastel voisin de la carte renforce l'effet. Sur un fond foncé, l'ombre portée disparaît (mesuré 1,01:1 sur #0a0a0f).

FAQ

Le neumorphisme sculpte la surface dans le fond : même teinte pour le fond et l'objet, une ombre claire et une ombre sombre à l'extérieur, et rien d'autre. Le claymorphisme pose un objet coloré sur le fond : une ombre portée qui le détache, deux ombres internes qui le bombent, une bordure blanche et des couleurs pastel ou vives. Résultat : le neumorphisme manque souvent de contraste, alors que la carte argile se lit même de loin — ici, titre à 8:1 au moins.
Parce que son ombre portée est noire à 12 % : sur un fond sombre, elle ne se voit plus (mesuré : 1,01:1 sur #0a0a0f, contre 1,30:1 sur le lilas du cadre vendu). Sur un site sombre, posez la carte dans une zone claire, ou remplacez l'ombre portée par une lueur colorée (rgba(139,92,246,.35) 0 10px 30px) — le volume vient alors surtout des ombres internes.
Non : c'est un <button> sans type ni gestionnaire, prêt à recevoir votre action. Ajoutez type="button" et un écouteur de clic, ou remplacez-le par un lien <a> en gardant la classe neu-clay-btn — le style s'applique à l'identique.