Applying CSS text-shadow to an input field can cause the shadow to be truncated

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!

cssinput-fieldtext-shadow

Answer №1

It appears that the text-shadow is being cropped by the text's bounding box. It's challenging to address this issue considering the various optimizations browsers have implemented for rendering performance.

One potential solution could be to utilize separate elements to manage the outer box style and the <input /> glow effect individually. By doing so, you can apply a drop-shadow to create the text shadow without it being 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>

Answer №2

To enhance the appearance of your element, experiment with adjusting the spread radius to meet your specific needs. The box-shadow property takes in four numerical values: the first for offset-x, the second for offset-y, the third for blur-radius, and the fourth for spread-radius. The fifth value determines the color of the shadow, and if desired, you can use the 'inset' property to place the shadow inside the element.

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

Utilize these values accordingly to achieve your desired result.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

trouble concerning the responsiveness of a jQuery popup

Hello, I am trying to create a responsive login popup using jQuery but have been struggling for a week. Below is the code snippet that I have been working on. Any help or guidance would be greatly appreciated. //scriptLogin.js archive $(document).ready ...

javascriptjquerycsshtmltwitter-bootstrap-3

Why isn't the background color displaying for the child text element during animation?

My search boxes are arranged in a grid layout with the use of the display: grid property. When I click on or focus on the <input type="text"> elements in column 1, the text elements within the <span> tag with class names placeholder2, ...

htmlcssflexboxcss-animations

Creating HTML code for a mobile responsive design

I am facing an issue with my clinic webpage where the images appear differently on PC and mobile devices. I am new to HTML and CSS, so I tried using max-width: 100% but it didn't work. The code was originally created by someone else and I need help fi ...

htmlcssresponsive

Stop users from being able to copy text on their smartphones' internet browsers

I am currently working on creating a competitive typing speed challenge using JavaScript. Participants are required to type all the words they see from a div into a textarea. In order to prevent cheating, such as copying the words directly from the div, o ...

javascriptphpjqueryhtmlcss

Exploring the use of color in text embellishments

Is it possible to change the color of the underline on text when hovering, while keeping it different from the text color? I have successfully achieved this in Firefox using the property "-moz-text-decoration-color". However, this does not work in other m ...

htmlcss

Could someone provide a detailed explanation on the functionality of multiple inline nth-child() in CSS?

In this scenario, there is an example provided: html>body>#wrapper>div>div>div:nth-child(1)>div:nth-child(1)>nav { I am curious about the functionality of this code. Could someone dissect each div, ">", and nth-child()? Your ins ...

htmlcss

VSCODE's intellisense feature seems to be ignoring CSS code within JSX files

I've been puzzling over why Visual Studio Code isn't recognizing CSS syntax inside JSX files. While I'm typing, CSS IntelliSense doesn't provide suggestions for CSS - only Emmet suggestions.https://i.stack.imgur.com/FegYO.png Despite t ...

cssreactjsvisual-studio-codejsxsyntax-highlighting

The concept of transparency and visual representation

Is there a way to prevent the opacity of the parent div from affecting the opacity of the img? <div class="parent_div" style="opacity:0.2"> <p>Some text</p> <img class="gif" style="opacity: 1;" src="ht ...

css

When hovering over nav bar links, shadows are not displayed

When hovering over the navbar links, I am able to change their color but a shadow at the bottom is missing. Is there a way to add a shadow at the bottom like it had before when not hovered? Visit this link for more information ...

htmlcss

Ways to make an area map more transparent

I'm encountering an issue with HTML opacity... Currently, I've implemented opacity using CSS but it's not functioning correctly. Below is my HTML and CSS code: <area shape ="rect" class="transbox" coords ="0,0,30,22" href ="test1.htm" ...

htmlcssopacity

Adaptable layout - featuring 2 cards side by side for smaller screens

I am currently designing a webpage that showcases a row of cards, each featuring an image and a title. At the moment, I am utilizing the Bootstrap grid system to display 4 cards per row on larger screens (col-md-2), but my goal is to modify this layout t ...

htmlcsstwitter-bootstrapbootstrap-4bootstrap-5

Arranging text within a td cell

This is what I currently have: <tr> <td colspan="4" style="font-size:7pt; font-color:red; font-weight: bold;"> PLEASE NOTE: SPECIFY THE ARTICLE IN AS MUCH DETAIL AS POSSIBLE </td> </tr> However, the text does not a ...

htmlcss

What is the best way to create an animation where every letter in a word transitions to a different

Is there a way to animate a word so that each letter changes color within a range of 7 colors, with all letters displaying different colors simultaneously in an infinite loop? <div class="box"> <h1 class="logo animate__animated an ...

javascripthtmljquerycss

Tips for implementing ng-hide/ng-show animations

Is there a way to create an animation on an element in Angular that will be triggered when the item's visibility is changed using ng-hide/ng-show? Which specific CSS classes should be included to ensure smooth animations on elements? ...

cssangularjscss-animations

Arrange elements side by side within siblings, while keeping the HTML structure intact

As evident from the code snippet, there are 2 dynamically generated flex divs (although there could be more). Is there a method to horizontally align items on larger screens without altering the HTML structure? I am seeking something similar to: https:/ ...

htmlcss

Tips for organizing the contents of nested items in alignment

Here's a layout I've created, you can view it on CodePen. .parent { display: flex; justify-content: space-between; } .left { flex-grow: 1; flex-basis: 0; background-color: blue; } .right { background-color: red; flex-grow ...

htmlcss

Switch up the appearance of a document by manipulating the stylesheet using a select tag

I'm currently facing an issue with the implementation of a drop-down box on my website for selecting different themes. Despite having the necessary javascript code, I am unable to get it working correctly. Here's the snippet: //selecting the sele ...

javascripthtmlcss

What causes the off-canvas menu to displace my fixed div when it is opened?

Using the Pushy off-canvas menu from GitHub for my website has been great, but it's causing some trouble with my fixed header. When I scroll down the page, the header sticks perfectly to the top, but once I open the off-canvas menu, the header disappe ...

javascriptjquerycssoff-canvas-menu

Ways to position a child element at the center of its parent container?

Hey there, is there a way I can achieve this specific layout without relying on position: absolute? Flexbox would be the preferred method. The main goal here is to have the middle element horizontally centered within its parent element, regardless of other ...

htmlcss

Align Text with Icon Using FontAwesome

Hey, I'm having a bit of trouble with something simple and it's driving me crazy. All I want to do is center the text vertically next to a FontAwesome icon. However, no matter what I try, I just can't seem to get it to work. I've looke ...

htmlcssfont-awesomevertical-alignment