Free · Fast · Privacy-first

CSS Inset Shadow Generator

The CSS inset keyword on box-shadow reverses the shadow direction so it appears inside the element rather than outside it, creating the visual impression of a recessed or pressed surface rather than a floating elevated one.

⚡

Visual builder for inset box-shadow declarations

🔒

Live preview of recessed and pressed surface effects

✨

Supports combining inset and outer shadow in one rule

⚡

Free browser-based tool with no login required

Cost: Free forever
Sign-up: Not required
Processing: In your browser
Privacy: Files stay local

FreeNo signupWhite-label

Add this Shadow Effect Builder to your website

Drop the Shadow Effect Builder into any page — blog post, product docs, intranet, school portal — with a single line of HTML. Your visitors get the full tool, processed entirely in their browser. No backend, no uploads, no signup.

Files stay 100% in the visitor's browser
Responsive — adapts to any container width
Free forever, no API key needed

Embed code

<iframe
  src="https://www.fixtools.io/css-tool/shadow-effect-builder?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Shadow Effect Builder by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

<iframe
  src="https://www.fixtools.io/css-tool/shadow-effect-builder?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Shadow Effect Builder by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

Attribution-friendly: a small "Powered by FixTools" link appears in the embed footer.

How the inset Keyword Reverses Shadow Direction to Simulate Recessed Surfaces

By default, box-shadow renders outside the element's border edge, making the element appear to float above its background surface. Adding the inset keyword fundamentally reverses this behaviour: the shadow is rendered inside the border edge, making the element appear to be pressed into or carved out of its background surface rather than floating above it. The offset values still control direction, but the interpretation inverts. A positive horizontal offset moves the shadow toward the right inner edge of the element, and a positive vertical offset moves it toward the top inner edge, opposite to the outer shadow behaviour. Blur softens the inner shadow edge in the same way as for outer shadows, and spread expands the inset shadow inward toward the centre of the element.

The most common use cases for inset shadows span several distinct UI component types and represent some of the most polished interaction patterns in modern interface design. Text inputs are often given a subtle inset shadow to make them look sunken and interactive: box-shadow: inset 0 1px 3px rgba(0,0,0,0.15) on a white input sitting on a light grey form background clearly signals to the user that the field is clickable and will accept input, without needing a heavy border or background colour shift. Toggle switches use a stronger inset shadow in the off state to communicate that the switch is inactive and pushed in, with the shadow removed or replaced by a coloured glow in the on state. Pressed button states use a small inset shadow combined with a slightly reduced outer shadow to simulate the physical action of pressing a real button downward into its housing.

Combining inset and standard outer shadows in a single box-shadow declaration gives precise control over both inner and outer depth simultaneously. The CSS property accepts a comma-separated list where each item can independently be inset or not, with no limit on the mix. For example, box-shadow: 0 2px 6px rgba(0,0,0,0.15), inset 0 1px 3px rgba(0,0,0,0.1) applies an outer elevation shadow and an inner highlight shadow in the same declaration. This composition technique creates the appearance of an element both floating above its parent surface and having internal depth within itself, which is particularly useful for premium card components with interactive surfaces, glossy buttons with inset highlight reflections, and panels that need both elevation and tactile inner detail.

Inset shadows require careful calibration against the element's background colour to read correctly. A dark inset shadow on a dark element produces almost no visible effect because the contrast between shadow and background is too low. A heavy inset shadow on a small element can overwhelm the visible interior and make the element look damaged rather than recessed. The reliable approach is to keep inset shadow offsets proportional to element size, use opacity in the 0.10 to 0.20 range for general inset work, and always preview the inset effect against the actual element fill colour rather than a generic white test surface. When inset shadows are calibrated correctly they add tactile polish; when miscalibrated they look broken.

MDN: box-shadow W3C CSS Backgrounds Specification

How to use this tool

💡

Enable the inset toggle in the builder, then set a small offset and moderate blur to create a sunken effect. For pressed button states, use a small inset with a dark shadow at the top and a lighter shadow at the bottom to simulate physical depression.

How It Works

Step-by-step guide to css inset shadow generator:

1
Enable inset mode in the builder
Toggle the Inset option in the builder controls to switch the preview from an outer shadow rendering to an inset shadow rendering. The preview will immediately update to show how the same offset, blur, and colour values appear when applied inside the element rather than outside it. The inset toggle is the foundational choice that determines whether you are building an elevation effect or a recession effect.
2
Set offset and blur for the recessed effect
Use a small vertical offset between 1 and 3 pixels for the subtle sunken input field look, or a larger offset between 4 and 8 pixels for a more deeply pressed surface appearance suitable for pressed button states and heavy panel recession. Adjust blur radius to control the softness of the inner shadow edge, with lower blur producing crisp edges and higher blur producing diffused interior shading.
3
Choose shadow colour and opacity
Select a dark colour at low opacity, typically rgba(0,0,0,0.10) to rgba(0,0,0,0.20), for the most natural recessed look that reads as ambient interior shadow. For more stylised effects, choose a saturated brand colour for a coloured inner glow that suggests the recessed surface is lit by coloured light from below, useful in gaming UI and themed dashboards where standard neutral inset shadows feel too plain.
4
Copy and apply the CSS
Copy the generated inset box-shadow declaration to your clipboard and add it to the relevant CSS rule for your button :active state, your text input, your toggle switch, or your panel component. The output is standard browser-ready CSS that works in every modern browser without prefixes. Pair the inset shadow with appropriate transition timing for smooth animation between states if the inset effect appears on a hover or active interaction.

Real-world examples

Common situations where this approach makes a real difference:

Sunken text input fields on a form

A form designer adds box-shadow: inset 0 1px 3px rgba(0,0,0,0.12) to all text input fields on a contact form sitting against a light grey form background. The subtle inset shadow makes each input appear gently recessed into the form surface, clearly distinguishing editable fields from static labels and section headings without needing a visible border around each input. The result reads as a more sophisticated form design than the default browser input rendering and matches the visual language of premium form libraries used in production SaaS dashboards.

Toggle switch off state

A UI developer is building a settings panel toggle switch component. In the off state, the switch background uses box-shadow: inset 0 2px 6px rgba(0,0,0,0.25) to make it look distinctly pressed in and visually inactive, with the inset shadow communicating that the control is currently deselected. In the on state, the inset shadow is replaced with a subtle outer glow in the brand colour, clearly communicating the state transition to the user without requiring an animated label or additional visual indicators alongside the switch itself.

Pressed button in a calculator UI

A developer is building a browser-based scientific calculator interface where each numeric and operator key needs to feel tactile and responsive to user input. Each button has an outer shadow at rest to suggest physical elevation. On :active during a click or tap, the outer shadow is replaced with box-shadow: inset 0 2px 4px rgba(0,0,0,0.3), giving the button an immediately pressed-in appearance. The fast 0.08 second transition makes each key feel tactile and confirms to the user that their input registered, even before any number appears on the calculator display.

Embossed panel in a skeuomorphic music app

A designer is building a skeuomorphic equalizer UI for a music production application and adds a recessed panel effect to the frequency band display area where the visualisation animates. Two inset shadows in opposite directions, one dark at the top edge and one lighter at the bottom edge, create a believable bevelled inset effect that makes the panel look carved into the brushed metal background texture of the surrounding interface. The technique reinforces the physical control surface metaphor that defines the application's design language.

When to use this guide

Use this when building pressed button states, sunken text input fields, toggle switches in the off position, or any UI element that should appear recessed into the page surface.

Pro tips

Get better results with these expert suggestions:

Match inset shadow depth to element size

A large panel measured at several hundred pixels per side can comfortably handle a 6 to 10 pixel inset shadow offset without looking distorted or cartoonish. A small button at 36 pixels height should use a 1 to 2 pixel inset offset maximum, because anything larger overwhelms the limited interior surface. Scaling shadow values proportionally to element size keeps the recessed visual effect perceptually consistent across components of different sizes within the same interface, so a button and a panel both read as having the same approximate depth despite using different absolute pixel values.

Use negative spread to concentrate inset shadows at edges

A negative spread value on an inset shadow pulls the shadow away from the opposing edges, concentrating its visible weight near the offset direction. This creates a more precise recessed highlight at one specific edge rather than a uniform inner glow surrounding the entire element interior, which more closely matches the appearance of real single-direction lighting falling into a recessed surface. The technique works particularly well on toggle switches and sunken input fields where you want to imply a specific lighting angle rather than ambient interior darkness.

Animate between inset states for toggle interactions

Toggle switch components transition between off and on states with clear visual feedback. Animating the box-shadow property from an inset shadow representing the off state to a coloured outer shadow or glow representing the on state with a 0.2 second transition provides immediate visual state feedback without requiring JavaScript class management for the visual portion of the change. The animation reinforces the physical metaphor of the toggle being flipped, making the interaction feel tactile and responsive rather than purely abstract or data-driven.

Avoid inset shadows on elements with background images

Inset shadows applied to elements with a background-image can be very difficult to read if the image is visually busy, because the shadow competes with image detail and may disappear into noise. If you need a recessed effect on an image container, apply the inset shadow to a pseudo-element such as ::after positioned absolutely over the image rather than directly on the container itself. This gives you full control over the shadow's visibility, opacity, and blend mode without the underlying image content interfering with the shadow rendering or competing for the viewer's attention.

Use inset shadows to make inputs look interactive

A subtle inset shadow on text inputs distinguishes them from static text and tells users the field is editable. box-shadow: inset 0 1px 3px rgba(0,0,0,0.12) is enough to create the recessed effect without looking heavy.

Combine with :active for real button press feedback

Apply no inset shadow at resting state, a small outer shadow at :hover, and an inset shadow at :active. The transition from outer to inset shadow on click gives tactile feedback that the button was pressed.

Use two inset shadows for a bevel effect

One inset shadow at the top in a lighter colour and one at the bottom in a darker colour creates a bevelled or embossed inner edge. This is the technique used for sunken panel backgrounds in skeuomorphic UI.

FAQ

Frequently asked questions

The inset keyword makes the shadow appear inside the element's border edge rather than outside it, fundamentally inverting the visual relationship between the element and its shadow. Without inset, a box-shadow suggests the element is floating above its background surface with light casting a shadow underneath. With inset, the shadow suggests the element is recessed or pressed into its background surface, with the inner shadow representing the shaded interior of a depressed area. The offset, blur, and colour values continue to work the same numerical way as for outer shadows, but they now describe an interior shadow rendered inside the element's box rather than an exterior shadow rendered outside it.

Yes, and combining them is one of the most powerful techniques in advanced CSS shadow work. Box-shadow accepts a comma-separated list of shadow declarations, and each individual item in the list can independently be inset or not, with no restriction on the mix. For example, box-shadow: 0 4px 8px rgba(0,0,0,0.15), inset 0 1px 3px rgba(0,0,0,0.1) applies an outer elevation shadow and an inner recessed shadow to the same element simultaneously, giving that element both perceived elevation above its parent and tactile inner depth at the same time. This composition pattern is the basis of glossy button designs and premium card components.

Define a resting state with a moderate outer shadow that suggests the button is elevated above the page, a :hover state that deepens the outer shadow slightly to imply the button rising further to meet the cursor, and an :active state that replaces the outer shadow with an inset shadow to simulate the button being physically pressed into the surface. The transition from outer to inset shadow on click visually mimics a real button being depressed by finger pressure. Use transition: box-shadow 0.1s ease for a fast, snappy animation that feels responsive to user input. The combination of these three shadow states tells a complete physical interaction story in pure CSS.

Yes, an inset shadow is rendered strictly inside the element's border box and is automatically clipped by the element's border-radius value. On a fully rounded pill button with border-radius: 9999px, the inset shadow will have rounded ends that match the button's border-radius precisely. On a sharp-cornered element with border-radius: 0, the inset shadow has perfectly square corners. This automatic shape-following behaviour makes inset shadows self-consistent with whatever shape the element takes, without requiring any additional configuration or shape-specific shadow handling in your CSS rules.

Yes, and this is one of the most polished focus indicator patterns in modern form design. Apply a neutral dark inset shadow at the resting state to make the input look subtly sunken into the form surface, then on :focus change the inset shadow to a coloured version using your brand colour or a high-contrast accessible blue to signal active focus clearly. This approach provides a focus indicator that is visually distinct from the resting state and does not rely solely on the browser default outline, but you must ensure the focus state meets WCAG 2.1 contrast requirements against the surrounding background to avoid creating an inaccessible focus indicator that fails screen reader users.

No, like every other box-shadow variant, inset shadows are purely visual paint operations and do not affect the CSS box model in any way. The element's computed width and height are unchanged by the presence or absence of an inset shadow, and content inside the element is not pushed inward or offset to make room for the shadow. However, if your inset shadow has a large offset or blur and overlaps the interior text or imagery content visually, you may want to add additional padding to the element to keep the content clear of the inner shadow edge. This is a layout decision, not a technical requirement of the shadow property.

A CSS border adds to the element's rendered dimensions when using the default box-sizing: content-box model, taking up real space in the layout, and a border is always sharp-edged with no blur or softness. An inset shadow does not add to the element's dimensions in any way and can have a blur radius, producing a soft graduated inner edge that fades into the element interior. Use borders when you need a visible structural edge or separator that occupies layout space. Use inset shadows for simulated depth, pressed states, recessed surfaces, and any visual effect where a sharp border edge would look too rigid or too technical for the design.

Not directly, because CSS transitions cannot animate the presence or absence of the inset keyword. The keyword fundamentally changes the type of the shadow, switching it from an outer rendering to an inner rendering, and there is no interpolation path between those two states. To create a smooth transition between outer and inset shadow states, define both shadows in the box-shadow declaration with one at zero opacity in each state and cross-fade between them. Alternatively, use two box-shadow layers where one transitions to zero opacity as the other becomes visible, achieving the animated switch without trying to animate the keyword itself.

Inset shadows can disappear into low-contrast situations because the shadow colour is often dark and the element background may also be dark, producing insufficient contrast between the shadow and the surrounding fill colour. To make an inset shadow visible on a dark or saturated background, either increase the shadow opacity significantly to 0.4 or higher, switch the shadow colour from black to an even darker shade of the element fill colour for a more integrated look, or use a coloured inset shadow that contrasts deliberately with the background. Always test inset shadows against the actual element background colour they will appear on rather than against a generic white preview.