Shadow Inset
An indigo inner glow swells from inside the element (inset box-shadow 0 → 30 px) over 0.3s on hover — pure CSS, no pseudo-element.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. Hover has 48 effects, including 5 free. Explore the category →
3 usage examples
How it works
The .fx-0351-root wrapper centres a 200 px button. At rest, box-shadow is absent. On hover, box-shadow: rgba(99, 102, 241, 0.5) 0 0 30px inset spreads an indigo glow from the edges inward over 0.3 s. The inner shadow (inset keyword) is drawn inside the element's borders, without overflowing onto neighbours — unlike an outer shadow. Intensity is controlled by the blur radius (30px) and colour opacity (0.5).
No pseudo-element, no added gradient — the only animated property is box-shadow. :focus-visible triggers the same glow with an indigo outline added. Pure CSS. Under reduced motion, the transition is removed but the glow appears instantly on hover and focus — state feedback guaranteed.
Accessibility
- Reduced motion: under
prefers-reduced-motion: reduce, the transition is disabled. The glow appears instantly on hover and focus. - Keyboard: the element is a natively focusable
<button>.:focus-visibletriggers the glow and adds a 2 px outline to signal keyboard focus. - Visibility on light backgrounds: the indigo glow may lack contrast on a white or beige background. Adjust the colour and opacity to maintain a visible signal.
- Touch: a tap activates the CSS hover state on most mobile browsers. The glow stays active until focus moves.
Browser compatibility
Pure CSS. Properties: box-shadow inset, transition, :focus-visible. Verified in Chromium and Firefox: glow visible, two independent copies, 0 errors. box-shadow inset is supported from Chrome 10, Firefox 4, Safari 5.1 — no modern browser limitation.
Without :focus-visible (before 2021), keyboard focus does not trigger the glow.
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0351-root">
<button class="isw-box isw-inset" type="button">
<span>Your text</span>
</button>
</div>One-time payment, no subscription — the code is yours forever
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
Glow colour (CSS — rgba(99, 102, 241, 0.5)) |
indigo at 50% | Replace the colour with your brand hue. rgba(255, 200, 50, 0.4) gives a warm golden glow. |
Blur radius (CSS — 30px in box-shadow) |
30 px | 10 px gives a glow concentrated at the edges; 60 px fills the centre. Beyond half the element's width, the centre is reached. |
Glow opacity (CSS — 0.5 in rgba) |
50% | 0.2 is very subtle; 0.8 is intense. Adjust to the background: the darker the background, the higher the opacity can be. |
Duration (CSS — 0.3s) |
0.3 s | 0.15 s is snappier; 0.5 s is softer. |
| Combined outer glow (CSS — add a 2nd box-shadow without inset) | inner glow only | Add , rgba(99, 102, 241, 0.2) 0 4px 20px to the box-shadow value for a subtle outer glow at the same time — both values separated by a comma animate together. |
FAQ
box-shadow property accepts multiple comma-separated values. Add a second value without inset: box-shadow: rgba(99,102,241,0.5) 0 0 30px inset, rgba(99,102,241,0.2) 0 8px 24px. Both animate together.0.7 or 0.8) and/or the blur radius (40–50px). You can also choose a more saturated or darker colour than indigo to match your palette.@keyframes on box-shadow with multiple steps, or a CSS animation on hue-rotate via filter applied to the parent element.
