When I apply text-shadow on an input field the shadow seems to clip around the text.
I tried this CSS code
@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;
}
And this is the Figma design I wanted to replicate. The design is incomplete without the glow on the text.
I am somewhat doubtful if a solution for this issue exists, since I searched for like an hour but found nothing.
It’d really help if there is a fix so that I won’t have to modify the design!
2
Answers
It seems the
text-shadow
is cut off by the bounding box of the text itself, I’m not sure if there’s an easy way to fix this with all the thing that browsers did to optimize rendering performance.However, I would use two different elements to handle the outer box style and the
<input />
glow effect separately. This way I could usedrop-shadow
to cast the text shadow without it gets cut off.You can try providing a spread radius and tweak it according to your requirements
The box-shadow accepts 4 numerical values first value for
offset-x
second value foroffset-y
third one forblur-radius
and 4th forspread-radius
.The 5th value is for the color property of the shadow..and additionaly there is ‘inset’ property too which sets the shadow inside the element.This is how you can use all of these..Try tweaking these values to match your requirements.