Floating action button: CSS box shadow example

When to use it

The floating action button is the one control on a screen that is allowed to float above everything: the round "add" or "compose" button in the corner of a mobile app. Its shadow has one job, to say "this is above the content, not part of it", and it has to say it on top of whatever scrolls underneath, which may be white, a photograph or a list of cards with their own shadows. So the FAB shadow is stronger and more layered than a card's, and it is tinted, because the button itself is the most saturated thing on the screen.

How it is built

Three layers, following the umbra, penumbra and ambient structure Material uses for its own FAB (elevation 6 at rest in Material's scale), but with the two outer layers tinted to the button's colour. The contact layer stays neutral and uses a negative spread so it only shows beneath the button:

CSS

.fab {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #263eb6;
  box-shadow:
    0 3px 5px -1px rgba(0, 0, 0, 0.2),       /* contact, neutral    */
    0 6px 10px rgba(38, 62, 182, 0.3),       /* key, tinted         */
    0 1px 18px rgba(38, 62, 182, 0.16);      /* ambient, tinted     */
}

Josh Comeau's principle applies with more force here than anywhere: "By matching the hue and lowering the saturation/lightness, we can create an authentic shadow that doesn't have that 'washed out' grey quality." A blue button over a grey shadow looks stuck on with tape; over a blue-tinted shadow it looks lit. In the generator, the colour picker on each layer is where this happens; set the mid and ambient layers to the box colour and drop their opacity.

Rest, hover and press

A FAB has three states and the shadow changes between them. Rest is above. Hover lifts it, with a wider, softer stack; press drops it back to rest or slightly below. The temptation is transition: box-shadow, and the performance guide explains why that repaints on every frame. The pattern that stays smooth is a pseudo-element carrying the lifted shadow, crossfaded with opacity, plus a one pixel transform:

CSS, hover lift

.fab { position: relative; isolation: isolate; transition: transform 150ms ease-out; }
.fab::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    0 5px 5px -3px rgba(0, 0, 0, 0.2),
    0 8px 10px 1px rgba(38, 62, 182, 0.3),
    0 3px 14px 2px rgba(38, 62, 182, 0.16);  /* lifted, painted once */
  opacity: 0;
  z-index: -1;
  transition: opacity 150ms ease-out;
}
.fab:hover { transform: translateY(-1px); }
.fab:hover::after { opacity: 1; }
.fab:active { transform: translateY(1px); }

Open the lifted state in the generator

Notes and limits

A round button is a small element with a wide shadow, so check it on the dark canvas: a tinted shadow on a dark page becomes a glow, which is often what you want for a FAB on a dark theme, but at a lower opacity. Make sure the button's icon contrasts with the button at 3:1 and the button contrasts with the page at 3:1; the shadow does not count toward either. And keep the FAB a single element on a page. Two floating buttons with two strong shadows is a page with no hierarchy.

The code in four formats

Straight from the generator's readout for this state. Copy the one your project speaks; the output formats guide explains where each goes.

CSS

box-shadow:
  0 3px 5px -1px rgba(0, 0, 0, 0.2),
  0 6px 10px rgba(38, 62, 182, 0.3),
  0 1px 18px rgba(38, 62, 182, 0.16);
border-radius: 32px;

SCSS

$shadow:
  0 3px 5px -1px rgba(0, 0, 0, 0.2),
  0 6px 10px rgba(38, 62, 182, 0.3),
  0 1px 18px rgba(38, 62, 182, 0.16);

.element {
  box-shadow: $shadow;
  border-radius: 32px;
}

Tailwind

<div class="shadow-[0_3px_5px_-1px_rgba(0,0,0,0.2),_0_6px_10px_rgba(38,62,182,0.3),_0_1px_18px_rgba(38,62,182,0.16)] rounded-[32px]"></div>

/* Or name it once in your theme (Tailwind v4): */
@theme {
  --shadow-custom: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px rgba(38, 62, 182, 0.3), 0 1px 18px rgba(38, 62, 182, 0.16);
}
/* then use class="shadow-custom" */

Stylus

.element
  box-shadow 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px rgba(38, 62, 182, 0.3), 0 1px 18px rgba(38, 62, 182, 0.16)
  border-radius 32px

Frequently asked questions

What shadow should a floating action button have?

A layered one that reads as the button floating a few pixels above the page: a tight dark contact layer, a tinted mid layer and a soft tinted ambient layer. Material specifies elevation 6 at rest for a FAB; this example follows the same three-layer structure with the two outer layers tinted to the button colour.

Why tint the shadow with the button colour?

A saturated button casts a coloured glow in real light, and a tinted shadow reads as that glow. A black shadow under a blue button looks like a grey ring. The contact layer stays neutral so the button still sits on something.

How do I make the FAB lift on hover without lag?

Keep the resting shadow on the button, put the lifted shadow on a pseudo-element at opacity 0, and transition the opacity plus a small translateY on hover. Never transition the box-shadow itself.

Does the shadow work on a round button?

Yes. box-shadow follows border-radius, so a 50 per cent radius gives a round shadow. The generator shows this: set the radius to half the box size and the shadow follows.