CodeKitHubEn quoi consiste cet outil ?
Cet outil combine un text-shadow de couleur claire et un de couleur foncée, décalés dans des directions opposées, pour créer l'illusion d'un texte surélevé (en relief) ou creusé (gravé).
Bascule entre les styles En relief et Gravé, et ajuste le curseur d'intensité pour contrôler la force de l'effet 3D.
Un aperçu en direct se met à jour instantanément pendant que tu tapes ou ajustes un réglage, pour que tu puisses affiner l'effet avant de copier le CSS.
Pourquoi l'utiliser ?
- Vous maquettez une landing page au style neumorphique et voulez que le titre principal semble « enfoncé » dans le fond plutôt que plat — réglez le style sur Gravé et copiez le text-shadow directement dans votre CSS.
- Vous devez recréer l'aspect d'une plaque métallique gravée pour le logo d'une marque rétro ou industrielle, et régler les valeurs de text-shadow à la main vous prendrait une demi-heure d'essais.
- Vous concevez un badge ou un sceau « vérifié » pour un site et voulez que le texte paraisse légèrement surélevé, comme une pièce de monnaie ou une médaille en relief.
- Un client vous demande un bouton au style Windows 95 ou skeuomorphe pour un projet nostalgique, et l'effet en relief est la base de cette esthétique.
- Vous avez poussé l'intensité au maximum et l'effet paraît exagéré pour votre design — baissez le curseur et observez l'aperçu en direct jusqu'à trouver un relief subtil qui ne détourne pas l'attention du contenu.
- Vous voulez appliquer le même effet à plusieurs titres du site avec des couleurs de fond différentes — générez le code pour chaque combinaison et vérifiez dans l'aperçu que le contraste fonctionne toujours avant de copier.
Mode d'emploi
- Tape le texte que tu veux styliser.
- Choisis En relief (surélevé) ou Gravé (creusé) dans le sélecteur de style.
- Ajuste le curseur d'intensité et choisis une couleur de fond et de texte adaptées à ton design.
- Clique sur « Copier » pour copier le code CSS généré et colle-le dans ta feuille de style.
Exemple
Entrée
Texte : "Embossed", Style : En relief, Intensité : 2Résultat
color: #c0c0c0;
background: #c0c0c0;
text-shadow: -2px -2px 1px rgba(255,255,255,0.7), 2px 2px 1px rgba(0,0,0,0.5);Le CSS généré définit la couleur du texte, la couleur de fond, et un text-shadow à deux couches qui crée l'effet surélevé ou creusé.
Comment fonctionne l'effet
Les effets en relief et gravé sont construits à partir de deux couches de text-shadow décalées, avec des couleurs claires et foncées opposées.
| Propriété | Fonction |
|---|---|
| Ombre claire (rgba(255,255,255,0.7)) | Simule une source de lumière frappant un bord du texte |
| Ombre foncée (rgba(0,0,0,0.5)) | Simule une ombre tombant sur le bord opposé |
| Direction du décalage | Inversée entre En relief et Gravé pour retourner l'illusion 3D |
| Intensité | Contrôle à quelle distance les ombres claire et foncée sont décalées du texte |
| Couleurs assorties | Couleur du texte et du fond réglées proches l'une de l'autre pour masquer le contraste plat |
Outils liés
Pour plus de générateurs CSS, essaie ceux-ci.
→ Générateur de Glassmorphism CSS · Générateur de Box Shadow · Générateur de Border Radius
Quand utiliser le relief et quand utiliser la gravure
Bien qu'il s'agisse techniquement de la même technique inversée, relief et gravure véhiculent des sensations différentes — le choix dépend du contexte du design.
- Utilisez En relief pour les éléments que vous voulez rendre « pressables », comme des boutons ou des badges — l'œil interprète une surface surélevée comme quelque chose d'interactif.
- Utilisez Gravé pour les étiquettes, filigranes ou textes informatifs qui doivent sembler fixes et faire partie du fond, comme creusés dans une surface.
- Dans les interfaces neumorphiques, Gravé fonctionne mieux pour les champs de saisie ou les zones « enfoncées », tandis que En relief est réservé aux éléments actifs.
- Évitez de mélanger les deux styles dans le même bloc visuel — combiner relief et gravure sur des éléments proches casse la cohérence de la source de lumière simulée.
Foire aux questions
Quelle est la différence entre En relief et Gravé ?
En relief fait apparaître le texte comme surélevé par rapport au fond, avec l'ombre claire en haut à gauche et l'ombre foncée en bas à droite. Gravé inverse cela, donnant l'impression que le texte est creusé dans le fond.
Pourquoi l'effet est-il meilleur avec une couleur de texte proche du fond ?
L'illusion de relief ou de gravure repose entièrement sur les ombres claires et foncées, pas sur le contraste entre le texte et le fond — donc régler la couleur du texte proche (ou identique) de celle du fond donne généralement le résultat le plus net.
Puis-je utiliser cet effet sur n'importe quel élément, pas seulement du texte ?
La propriété text-shadow générée par cet outil ne s'applique qu'au texte. Pour un effet similaire sur des formes ou des boutons, il te faudrait une configuration box-shadow comparable.
Cet outil enregistre-t-il ou suit-il ce que je tape ?
Non. Le CSS est généré entièrement dans ton navigateur — rien n'est envoyé ni stocké sur un serveur.
Est-ce que ça fonctionne dans tous les navigateurs ?
Oui — text-shadow bénéficie d'une excellente prise en charge sur tous les navigateurs modernes, y compris Chrome, Firefox, Safari et Edge.
Pourquoi mon texte ne semble-t-il pas en relief après avoir collé le CSS sur mon site ?
La cause la plus fréquente est que la couleur de fond réelle de votre élément ne correspond pas au background généré par l'outil, ou que le texte a une couleur trop différente du fond. Copiez aussi la couleur de fond générée, ou ajustez-la manuellement pour qu'elle soit identique ou très proche de celle du texte.
Puis-je combiner l'effet de relief avec une police grasse ou très épaisse ?
Oui, mais le résultat change : les polices épaisses ont souvent besoin d'une intensité plus forte pour que le relief se remarque, tandis que les polices fines rendent mieux avec une intensité faible — testez plusieurs valeurs dans l'aperçu en direct avec votre police réelle avant de trancher.
L'effet rend-il aussi bien sur un fond avec image ou dégradé ?
Pas exactement — l'effet est calibré pour un fond de couleur unie. Sur une image ou un dégradé, les ombres claire et foncée s'appliqueront toujours, mais l'illusion de relief peut perdre en force si le fond a déjà beaucoup de contraste propre.
Puis-je utiliser cette technique en mode sombre et en mode clair sur le même site ?
Oui, mais il faut générer deux versions distinctes : les couleurs d'ombre claire et foncée qui fonctionnent bien sur un fond clair ne produisent pas le même effet sur un fond sombre — ajustez la couleur de fond dans l'outil pour chaque thème et copiez le CSS correspondant.