CSS text-shadow clips when applied to an input field

Question

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;
}

This is the result

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!

Answer 1

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 use drop-shadow to cast the text shadow without it gets cut off.

@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-container {
    width: max-content;
    height: max-content;
    padding: .69rem;
    place-self: center;
    background: linear-gradient(to top, #81109333, #81109300), #000000;
    border-bottom: 1px solid #81109399;
    border-radius: .5rem;
    box-shadow: 0 0 1rem #d33fe919;
}

.input-container input {
    appearance: none;
    color: #d44fe9;
    font: 600 13px "Jost";
    border: none;
    outline: none;
    background: transparent;
    filter: drop-shadow(0 0 1rem #d44fe9e5);
}

<div class="input-container">
  <input value="Lorem Ipsum" />
</div>