Skip to main content

Add a 3D style to your text

Add a touch of 3D to your text using a few lines of code

A 3D text using CSS

h2 { 
--d: .3em; /* control the depth */
line-height: 2; /* control the distance between boxes */
h2 span {
padding-block: .1em calc(.1em + var(--d));
padding-inline:.2em calc(.2em + var(--d));
box-decoration-break: clone;
conic-gradient(at right var(--d) bottom var(--d),#0004 37.5%,#0008 0 75%,#0000 0)
#d81a14; /* the main color */
mask: linear-gradient(45deg,#0000 calc(var(--d)*cos(45deg)),#000 0 calc(100% - var(--d)*cos(45deg)),#0000 0);

See the Pen CSS only 3D multi-line text by Temani Afif (@t_afif) on CodePen.