Kevin Powell - Community•9mo ago

Is there a way to have bg-clip-text not cut off letters (eg: 'g') prematurely?

The g gets cut off prematurely. Adding a line-height of >= 1.2em fixes it, but makes the gaps between "Software" and "Engineer" incredibly huge and ugly on smaller devices. I'd love for it to be consistent.

              <div className="p-10 flex flex-col gap-4">
                <div className="text-5xl font-bold">
                  <h1 className="text-white">My Name</h1>
                  <h2 className="bg-gradient-to-r from-slate-300 to-blue-400 text-transparent bg-clip-text inline-block">Software Engineer</h2>
                </div>
                <p className="text-slate-400 leading-relaxed">text</p>
              </div>

              <div className="p-10 flex flex-col gap-4">
                <div className="text-5xl font-bold">
                  <h1 className="text-white">My Name</h1>
                  <h2 className="bg-gradient-to-r from-slate-300 to-blue-400 text-transparent bg-clip-text inline-block">Software Engineer</h2>
                </div>
                <p className="text-slate-400 leading-relaxed">text</p>
              </div>

1 Reply

MarkBoots•9mo ago

you cant try to give the h2 a padding-bottom

Gaming

Programming

Is there a way to have bg-clip-text not cut off letters (eg: 'g') prematurely?