Claymorphism
Un style argile 3D purement CSS : dégradé directionnel, double ombre intérieure pour le relief et élévation au survol — aucune ligne de JavaScript.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Cartes comprend 41 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'apparence argile repose sur un dégradé linéaire orienté à 145° (linear-gradient(145deg, #f87171, #ef4444)) : la face supérieure-gauche paraît plus claire, la face inférieure-droite plus profonde — sans aucun traitement image.
Le relief organique vient d'un triple box-shadow superposé : une ombre intérieure lumineuse en haut-à-gauche (rgba(255,255,255,.4) 2px 2px 4px inset) simule le reflet spéculaire ; une ombre intérieure sombre en bas-à-droite (rgba(0,0,0,.1) -2px -2px 4px inset) creuse la matière ; une ombre extérieure (rgba(0,0,0,.25) 8px 8px 20px) soulève la carte au-dessus du plan.
Au survol, transform: translateY(-5px) simule une pression relâchée : la carte se soulève et l'ombre extérieure s'éloigne du fond (offset et blur agrandis). La transition: .3s lisse le déplacement en 300 ms.
L'effet est entièrement statique côté script — le champ js du code est vide. Il s'applique via deux classes CSS empilables (card-demo + card-clay) sur n'importe quel <div>, sans modifier le DOM ni écouter d'événements.
Accessibilité
- prefers-reduced-motion non géré dans le code source : la
transition: .3ssur:hovers'exécute même si l'OS signale une préférence pour réduire le mouvement. Ajoutez@media (prefers-reduced-motion: reduce) { .card-clay { transition: none } }si la carte est interactive. - Le contenu textuel interne est exposé nativement aux lecteurs d'écran — l'effet n'applique aucun
aria-hiddensur la carte. - Aucun style
:focus-visiblen'est défini dans l'effet : le focus clavier utilisera l'outline par défaut du navigateur (visible mais non personnalisé). - Contraste texte : le blanc sur fond rouge
#ef4444atteint un ratio d'environ 3,7:1 — passe WCAG AA pour les textes grands (≥ 18 px bold) mais insuffisant pour un corps de texte courant. Adaptez la teinte du fond ou du texte selon votre contenu. - Aucune interaction JavaScript → la navigation au clavier et la sémantique dépendent entièrement du contenu injecté dans la carte.
Compatibilité navigateur
Utilise CSS3 standard : box-shadow inset, linear-gradient, border-radius, transform — supportés dans tous les navigateurs modernes depuis 2012.
Sur les très vieux navigateurs (IE9 et antérieurs, hors scope), box-shadow inset n'est pas rendu : la carte reste visible avec fond en aplat et bords arrondis. Aucune erreur JS, l'UI reste fonctionnelle.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="demo-preview">
<div class="card-demo card-clay">
<!-- Votre contenu : icône, titre, description -->
</div>
</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| background (gradient) | linear-gradient(145deg, #f87171, #ef4444) | Les deux couleurs hex définissent la teinte clay : première = face éclairée, seconde = fond. Teintez aussi l'ombre extérieure (rgba(r,g,b,.25)) pour que les deux soient cohérentes. |
| border-radius | 30px | Arrondi de la carte. 30 px donne l'aspect 'blob mou' du claymorphism. Réduisez à 16–20 px pour un rendu sobre ; 50% pour un badge ou avatar rond. |
| box-shadow inset highlight | rgba(255,255,255,.4) 2px 2px 4px inset | Opacité du reflet blanc intérieur haut-gauche. .6 = surface brillante (plastique) ; .15 = aspect mat (caoutchouc). |
| box-shadow inset shadow | rgba(0,0,0,.1) -2px -2px 4px inset | Ombre intérieure bas-droite qui creuse la matière. Montez à .2–.3 pour un relief plus marqué. |
| box-shadow outer | rgba(0,0,0,.25) 8px 8px 20px | Élévation ambiante. Modifiez l'offset (8px) et le blur (20px) ; teintez avec la couleur de la carte pour une ombre colorée. |
| translateY (hover) | -5px | Distance de soulèvement au survol. -8 px = ressort vif ; -2 px = effet subtil ; 0 pour désactiver l'élévation sur un élément non interactif. |
| transition | .3s | Durée de l'animation hover. .15 s = réaction vive ; .5 s = mouvement lent et crémeux. |
FAQ
js du code est vide — aucun script n'est chargé ni nécessaire. Copiez les classes card-demo et card-clay sur n'importe quel div : ça fonctionne dans tous les contextes (React, Vue, HTML statique).linear-gradient(145deg, #f87171, #ef4444) de la classe .card-clay. Pour un rendu convaincant, teintez aussi la troisième couche du box-shadow : remplacez rgba(0,0,0,.25) par rgba(r,g,b,.25) avec les composantes RVB de votre couleur principale.card-clay sur un bouton, un badge ou un avatar. Ajustez le border-radius (50% pour un rond, 12 px pour un bouton) et réduisez le translateY du hover à -2 px sur les petits éléments pour que le déplacement reste proportionnel à leur taille.
