Shadow Pop
Ombre empilée en escalier qui grandit au survol et propulse le texte vers l'avant — effet 3D pur CSS, sans 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. Texte comprend 56 effets, dont 4 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'effet repose sur la propriété text-shadow multicouche : au repos, quatre ombres identiques en couleur (#6366f1) sont empilées à des décalages croissants (1 px, 2 px, 3 px, 4 px) dans la même direction diagonal bas-droite. L'empilement continu crée l'illusion d'un bloc de profondeur solidaire derrière le texte.
Au survol, deux mécanismes jouent en parallèle. Le transform: translate(-4px, -4px) déplace le texte en diagonal haut-gauche — sens rigoureusement opposé à l'ombre — simulant un soulèvement hors du plan. Simultanément, la règle :hover étend les ombres à huit couches (1 px à 8 px) : la profondeur perçue double, renforçant l'illusion que le texte a été extrait de la page.
La transition: .3s posée sur l'élément anime en un seul déclaratif le changement de text-shadow et la translation — les navigateurs interpolent chaque offset de shadow individuel et la transformation en parallèle. Zéro JavaScript, zéro dépendance : l'effet tient en deux règles CSS.
Accessibilité
- prefers-reduced-motion : absent du code fourni. Si vous intégrez l'effet dans un contexte sensible, ajoutez
@media (prefers-reduced-motion: reduce) { .text-shadow-pop { transition: none; } .text-shadow-pop:hover { transform: none; } }pour respecter les préférences système. - L'effet est purement décoratif : aucun attribut ARIA n'est requis sur la balise texte. Si le texte est un lien ou un bouton,
roleetaria-labelrestent sur l'élément interactif natif. - Clavier : l'effet ne s'active qu'au
:hoverCSS — les utilisateurs naviguant au clavier ne voient pas la transition 3D. Pour l'activer aussi au focus, ajoutez.text-shadow-pop:focus-visible { transform: translate(-4px,-4px); text-shadow: /* 8 couches */ ; }. - Contraste : le code ne définit pas de fond. Couleur texte
#fffet ombre#6366f1passent WCAG AA sur fonds sombres (≥ #1c1c1c). Sur fond clair, choisissez une couleur d'ombre contrastante et ajustezcolor. - Aucune animation automatique : l'effet ne se déclenche qu'au survol de l'utilisateur — il respecte implicitement WCAG 2.3.1 (pas de flash) et 2.2.2 (aucune boucle à arrêter).
Compatibilité navigateur
Repose sur text-shadow, transform et transition — pris en charge dans tous les navigateurs modernes sans préfixe vendeur.
Sans <code>transform</code> (IE 8 et antérieurs), le texte reste en position normale avec les 4 ombres statiques — le relief 3D est absent mais le contenu reste lisible et aucune erreur JS n'est levée.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<span class="text-shadow-pop">Votre texte</span>
<!-- Sur un titre -->
<h1 class="text-shadow-pop">Titre hero</h1>
<!-- En navigation -->
<nav>
<a class="text-shadow-pop" href="#">Accueil</a>
<a class="text-shadow-pop" href="#">Services</a>
<a class="text-shadow-pop" href="#">Contact</a>
</nav>
<!-- Sur une citation -->
<blockquote class="text-shadow-pop">
« Citation mémorable »
</blockquote>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 |
|---|---|---|
| Couleur d'ombre (#6366f1) | #6366f1 | Hex de l'ombre dans toutes les déclarations text-shadow de .text-shadow-pop et .text-shadow-pop:hover. Remplacez par votre couleur brand — rgba fonctionne aussi pour un halo semi-transparent. |
| Profondeur au repos (4 couches, 1–4 px) | 4 ombres (1 px → 4 px) | Les 4 lignes #6366f1 Npx Npx 0 dans .text-shadow-pop { text-shadow: … }. Réduisez à 2–3 couches pour un effet discret, montez à 6 pour une profondeur marquée au repos. |
| Profondeur au survol (8 couches, 1–8 px) | 8 ombres (1 px → 8 px) | Dans .text-shadow-pop:hover { text-shadow: … }, étendez ou réduisez le nombre de couches. Chaque couche supplémentaire ajoute 1 px de profondeur perçue. |
| Décalage de lift (translate -4px, -4px) | translate(-4px, -4px) | Dans .text-shadow-pop:hover { transform: … }. Alignez la valeur absolue sur la profondeur max au repos (ici 4 px). Augmentez proportionnellement si vous ajoutez des couches. |
| Durée de transition (0.3s) | 0.3s | La propriété transition: .3s sur .text-shadow-pop. Réduisez à 0.15s pour des liens de navigation réactifs, montez à 0.5s pour un effet plus cinématique. |
| Couleur du texte (color: #fff) | #fff | Dans .text-shadow-pop { color: #fff; }. Sur fond clair, choisissez une couleur foncée et vérifiez que l'ombre reste lisible en profondeur (ratio ≥ 4,5:1 entre texte et fond). |
FAQ
text-shadow s'applique à chaque ligne de texte indépendamment. Le transform déplace le bloc entier. Sur un paragraphe long, le déplacement vertical uniforme peut sembler lourd — préférez l'effet sur des titres courts (1–3 mots) ou des liens isolés pour un rendu optimal..text-shadow-pop { text-shadow: … } et une autre dans .text-shadow-pop:hover { text-shadow: … }. La transition interpolera la couleur (hex ou rgba) entre les deux états — utile pour un changement de teinte qui accompagne la profondeur.background: linear-gradient(…); -webkit-background-clip: text; -webkit-text-fill-color: transparent; sur .text-shadow-pop. L'ombre continue de se dessiner sous le texte dégradé et la transition reste fonctionnelle. Testez sur Safari : l'interpolation de text-shadow peut varier lorsque -webkit-text-fill-color est actif.
