I've encountered an issue when applying text-shadow to an input field, where the shadow appears to clip around the text.
Here is the CSS code I used:
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background: #000000;
width: 100vw;
height: 100vh;
display: grid;
}
input {
appearance: none;
width: max-content;
height: max-content;
padding: .69rem;
place-self: center;
font: 600 13px "Jost";
color: #d44fe9;
text-shadow: 0 0 1rem #d44fe9e5;
background: linear-gradient(to top, #81109333, #81109300), #000000;
border: none;
border-bottom: 1px solid #81109399;
border-radius: .5rem;
outline: none;
box-shadow: 0 0 1rem #d33fe919;
}
This is the outcome: https://i.sstatic.net/LFLlOAdr.png
I aimed to replicate a Figma design that includes a glow effect on the text. However, I'm struggling to achieve this effect without the clipping issue. The design feels incomplete without the desired text glow. https://i.sstatic.net/zpeIIr5n.png
I have searched for a solution for over an hour but haven't found one yet. If there's a fix out there, it would be greatly appreciated so I don't have to alter the design!