css Question posted in
Some basic documentation can be found here.

CSS text-shadow clips when applied to an input field

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!

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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 for offset-y third one for blur-radius and 4th for spread-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.

    box-shadow:0px 0px 10px 2px 'red';

    This is how you can use all of these..Try tweaking these values to match your requirements.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search