Effet 3D sur texte en CSS

Dernière mise à jour : novembre 2022

Cliquez sur les lettres pour changer le texte.

Le code :

<div class=effet_3d></div>

*,*::before,*::after{box-sizing: border-box;}

.effet_3d{
	
--couleur:0, 0, 0;
margin: 2rem auto;
display: flex;
justify-content: center;
font-family: 'Exo';
color: white;
text-shadow: 
0 1px 0 #ccc, 
0 2px 0 #acacac,
0 3px 0 #a0a0a0,
0 4px 0 #9b9a9a,
0 5px 0 #888787,
0 6px 1px rgba(var(--couleur),.1),
0 0 5px rgba(var(--couleur),.1),
0 1px 3px rgba(var(--couleur),.3),
0 3px 5px rgba(var(--couleur),.3),
0 5px 10px rgba(var(--couleur),.25),
0 10px 10px rgba(var(--couleur),.2),
0 20px 20px rgba(var(--couleur),.15);
font-size: calc(100vw / 10)
	
	}

Autre exemple :

Cliquez sur les lettres pour changer le texte.

Code :

<div class=effet-3d>3D</div>

*,*::before,*::after{box-sizing: border-box;}

.effet-3d {
	
margin: 2rem auto;
display: flex;
justify-content: center;
font-family: 'Exo';
color: #ff8e49;
font-size: calc(100vw / 5);
letter-spacing: .015em;
text-shadow: 0 0 0 #ce4a27,
.0025em .0025em 0 #ce4a27,
.005em .005em 0 #ce4a27,
.0075em .0075em 0 #ce4a27,
.01em .01em 0 #ce4a27,
.0125em .0125em 0 #ce4a27,
.015em .015em 0 #ce4a27,
.0175em .0175em 0 #ce4a27,
.02em .02em 0 #ce4a27,
.0225em .0225em 0 #ce4a27,
.025em .025em 0 #ce4a27,
.0275em .0275em 0 #ce4a27,
.03em .03em 0 #ce4a27,
.0325em .0325em 0 #ce4a27,
.035em .035em 0 #ce4a27,
.0375em .0375em 0 #ce4a27,
.04em .04em 0 #ce4a27,
.0425em .0425em 0 #ce4a27, 
.045em .045em 0 #ce4a27,
.0475em .0475em 0 #ce4a27,
.05em .05em 0 #ce4a27,
.0525em .0525em 0 #ce4a27,
.055em .055em 0 #ce4a27,
.0575em .0575em 0 #ce4a27,
.06em .06em 0 #ce4a27,
.0625em .0625em 0 #ce4a27,
.065em .065em 0 #ce4a27,
.0675em .0675em 0 #ce4a27, 
.07em .07em 0 #ce4a27,
.0725em .0725em 0 #ce4a27,
.075em .075em 0 #ce4a27,
.0775em .0775em 0 #ce4a27,
.08em .08em 0 #ce4a27,
.0825em .0825em 0 #ce4a27,
.085em .085em 0 #ce4a27,
.0875em .0875em 0 #ce4a27,
.09em .09em 0 #ce4a27,
.0925em .0925em 0 #ce4a27,
.095em .095em 0 #ce4a27,
.0975em .0975em 0 #ce4a27,
.1em .1em 0 #ce4a27
	
	}