How to Create CSS Inset Shadows for Input Fields and Pressed Elements
Inset shadows are one of the most underrated CSS shadow techniques. While most designers focus on drop shadows that lift elements off the page, inset shadows do the opposite — they press elements downward and create the illusion of depth inside a component. When you click a button and it appears to sink slightly, that's often achieved with an inset shadow. When an input field looks recessed into the page, that visual effect comes from a subtle inner shadow.
Understanding inset shadows opens up a whole new dimension of UI design. They add refinement to form controls, create tactile feedback for interactive elements, and help separate content areas without relying on borders alone. If you've ever wondered how to give your inputs and pressed states that polished, pressed-in look, this guide will show you exactly how to do it.
What Is an Inset Shadow?
An inset shadow is a CSS shadow that appears inside an element instead of outside it. While a normal box-shadow creates a shadow that extends beyond the element's edges, an inset shadow is contained within the element's boundaries.
The syntax is simple — just add the inset keyword to your box-shadow:
box-shadow: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.10);This tells the browser to render the shadow on the inside of the element. The offset, blur, spread, and color values work the same way as regular shadows, but the visual effect is completely different. Instead of floating above the surface, the element appears to have depth pushed inward.
Inset shadows are useful because they use the principle of negative space. Light normally comes from above in UI design, so when you place a shadow inside an element, it looks like the light is being blocked from entering. This creates the impression that the element is recessed or pressed into the surface.
When to Use Inset Shadows
Inset shadows work best in specific situations where you want to communicate that an element is pressed, recessed, or contains content.
Form inputs are the most common use case. A text input with a subtle inset shadow looks more like a physical field where you type. The shadow makes the input feel separate from the page background and shows that it's an interactive area you can click into.
Pressed button states benefit from inset shadows. When you click a button, adding an inset shadow can make it feel like the button has been pushed down. This gives users tactile feedback and helps them understand that the action was registered.
Toggle switches and checkboxes in custom designs often use inset shadows to show the pressed or activated state.
Range sliders and volume controls can use small inset shadows on the track or the handle to show depth.
Panels and containers that should appear recessed or background-like can use inset shadows to sink them slightly below the main content.
Text areas and multi-line inputs benefit from the same treatment as single-line inputs — a subtle inner shadow clarifies that the element is a content field.
The key principle is that inset shadows should support clarity and interaction feedback. They work best when they help users understand which elements can be interacted with and what state those elements are in.
Common CSS Inset Shadow Examples
Subtle form input shadow
box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);This is the lightest option, best for minimal designs or when the input already has a visible border. The small Y offset and blur radius create barely noticeable depth.
Standard input field shadow
box-shadow: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.10);This is a good default for most form inputs. It's visible enough to communicate "this is a field" but subtle enough to not distract from the design. Use this when you want the input to feel slightly recessed without being heavy.
Pressed button shadow
box-shadow: inset 0px 2px 6px 0px rgba(0, 0, 0, 0.15);When a button is clicked, use this shadow to give it a pushed-down appearance. It's stronger than an input shadow because the visual feedback needs to be noticeable during interaction.
Deep recessed panel shadow
box-shadow: inset 0px 4px 8px 0px rgba(0, 0, 0, 0.12);For larger containers or panels that should feel noticeably sunken, use more offset and blur. This works well for sidebars, content cards that sit behind other content, or design systems where depth hierarchy matters.
Light inset shadow for dark backgrounds
box-shadow: inset 0px 2px 4px 0px rgba(255, 255, 255, 0.15);On dark backgrounds, black shadows become invisible. Use a transparent white or light-colored shadow instead. This creates the same depth effect but works with dark-themed interfaces.
Multiple inset shadows for complex depth
box-shadow:
inset 0px 1px 2px 0px rgba(0, 0, 0, 0.08),
inset 0px 4px 8px 0px rgba(0, 0, 0, 0.06);For advanced designs, you can layer multiple inset shadows. The first shadow creates a sharp inner edge, and the second creates a broader recessed effect. This is sophisticated but should be used sparingly.
How to Create Inset Shadows with the Generator
Using the shadow-generator for inset shadows is straightforward. You'll find all the same controls, but now you'll also check the inset checkbox to toggle the shadow to inset mode.
Start by adjusting the Y offset. For most form elements, a small positive value like 2px works well. The Y offset is more important than X offset for inset shadows because it mimics light coming from above.
Next, set the blur radius. For inputs, something between 3px and 6px creates a soft, natural look. Avoid sharp shadows with blur near 0px — they look dated and harsh.
Keep the spread radius at 0px most of the time. Negative spread values make the shadow tighter, which can be useful for very subtle effects, but it's rarely necessary.
Opacity is critical. Start around 0.08 to 0.12 for inputs, and increase to 0.15 or 0.20 for stronger effects like pressed buttons. A high-opacity inset shadow can look heavy and muddy, so err on the side of subtlety.
Finally, test the shadow against your actual background color. An inset shadow that looks perfect on white might disappear on a light grey background. The generator's background color control lets you preview this before copying the code.
Inset Shadows for Form Inputs
Form inputs are where inset shadows shine. A well-designed input field should communicate several things at once: it's a place to type, it's distinct from the background, and it's interactive.
For a standard text input, use a subtle inset shadow combined with a border:
input {
border: 1px solid #e5e7eb;
background: white;
box-shadow: inset 0px 2px 4px 0px rgba(15, 23, 42, 0.08);
}The border gives structure, and the inset shadow adds depth. Together, they make the field feel like a recessed area where content goes.
For larger text areas, you can use slightly more emphasis:
textarea {
border: 1px solid #e5e7eb;
background: white;
box-shadow: inset 0px 2px 6px 0px rgba(15, 23, 42, 0.10);
}The extra blur and opacity help the larger surface feel appropriately recessed.
On dark backgrounds, switch to a light shadow:
input {
border: 1px solid #374151;
background: #1f2937;
box-shadow: inset 0px 2px 4px 0px rgba(255, 255, 255, 0.08);
}White or light-colored shadows on dark backgrounds create the same visual effect as dark shadows on light backgrounds.
Inset Shadows for Pressed Button States
Buttons that respond to clicks benefit enormously from inset shadows. When a user presses a button, adding an inset shadow creates the impression that the button has been pushed down into the page.
Here's a button with both normal and pressed states:
button {
background: #3b82f6;
color: white;
border: none;
padding: 12px 24px;
cursor: pointer;
}
button:active {
box-shadow: inset 0px 2px 6px 0px rgba(0, 0, 0, 0.20);
}When the user clicks the button, the :active state triggers and adds the inset shadow. The effect is immediate and feels responsive.
For a more sophisticated approach, combine the inset shadow with a slight transform:
button:active {
box-shadow: inset 0px 2px 6px 0px rgba(0, 0, 0, 0.20);
transform: translateY(2px);
}The transform pushes the button down by 2 pixels, and the inset shadow reinforces that effect. Together, they create strong tactile feedback.
Inset Shadows vs. Borders
You might wonder whether to use an inset shadow or a border to define form inputs. The answer is: often both.
A border provides structure and a sharp edge. An inset shadow adds depth and dimension. Use them together for the best results:
input {
border: 1px solid #d1d5db;
box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
}If you want to skip the border entirely, you can use a slightly stronger inset shadow with a subtle background color change:
input {
background: #f9fafb;
box-shadow: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
}The background color difference and inset shadow together create enough visual separation that a border becomes unnecessary.
On very modern, minimalist designs, some interfaces skip both borders and inset shadows entirely, relying only on a background color that contrasts with the page background. But for clearer, more traditional interfaces, an inset shadow adds polish without being heavy.
Avoiding Common Inset Shadow Mistakes
Using inset shadows that are too strong. A heavy inset shadow can make an interface look dated or like it's from the early 2000s. Keep opacity low, usually under 0.15. If the effect is barely visible, that's usually a sign you're on the right track.
Forgetting to adjust the Y offset. An inset shadow with zero Y offset looks flat and artificial. A small positive Y offset (like 2px to 4px) mimics light from above and looks much more natural.
Using blur that's too sharp. Inset shadows should feel soft and subtle. A blur radius of 2px or 3px often looks too harsh. Aim for 4px to 8px for most inputs, and 6px to 10px for larger elements.
Not testing on the actual background. An inset shadow that looks great on white might completely disappear on a light grey background. Always use the generator's background color feature to test before finalizing.
Applying inset shadows to elements that don't need them. Not every element should have an inset shadow. Reserve them for inputs, pressed states, and elements where recessed depth makes semantic sense.
Inset Shadows on Different Element Types
Search inputs
Search inputs often benefit from slightly stronger inset shadows because they need to stand out as interactive fields:
box-shadow: inset 0px 2px 6px 0px rgba(0, 0, 0, 0.10);Number inputs and spinners
Number inputs are more compact but should still have an inset shadow to feel like a field:
box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);Select dropdowns
A custom select element can use an inset shadow to communicate that it's interactive:
box-shadow: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.08);Toggle switches
A toggle that's in the "off" state might use an inset shadow on the track to show it's recessed:
box-shadow: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.12);Sliders and range inputs
The track of a custom range input can use an inset shadow:
box-shadow: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.10);Testing and Refinement
The best way to get inset shadows right is to build and test. Use the shadow-generator to create candidates, then paste them into your actual project and view them in context.
Pay attention to:
- Contrast with the background. Does the shadow read as depth, or does it disappear?
- Consistency with other elements. Do all your inputs use similar shadows, or is each one different?
- How it looks on hover and focus. Does the shadow remain effective when the input is focused, or should you modify it?
- Mobile appearance. Does the shadow still work on smaller screens where the form might be zoomed in?
Small adjustments make a big difference. Sometimes changing opacity by 0.02 or blur by 1px transforms the effect from subtle to perfect.
Summary
Inset shadows transform form inputs and pressed elements from flat, two-dimensional fields into components that feel recessed and three-dimensional. A well-placed inset shadow communicates depth, interactivity, and polish without requiring heavy visual effects.
Start with subtle shadows around 0.08 to 0.12 opacity, and always test against your actual background color. Use the shadow-generator to preview different values, then copy the code into your project. Most form inputs benefit from an inset shadow combined with a border or background color change. Pressed button states should use slightly stronger inset shadows to give clear tactile feedback.
Remember that inset shadows are most effective when they're subtle. A barely visible shadow is almost always better than one that stands out too much. Let the shadow support your design without dominating it, and your interfaces will feel more refined and intentional.
