34 CSS Floating Buttons
02 / 34

All 34 in 34 CSS Floating Buttons

  1. 01Material Design 3 Floating Action Button (FAB)
  2. 02iOS-Style Compose Floating Button
  3. 03WhatsApp Floating Message Button CSS
  4. 04Intercom / Drift Chat Bubble Floating Button
  5. 05Accessible WAI-ARIA Floating Action Button (WCAG 2.2)
  6. 06Extended FAB with Icon and Label (Material Design 3)
  7. 07Speed Dial Radial Menu FAB with Backdrop
  8. 08Pure CSS FAB Speed Dial (No JavaScript)
  9. 09Material Gradient Floating Action Button CSS
  10. 10Vertical and Horizontal Speed Dial FAB Menu CSS
  11. 11Morphing FAB Button That Expands to Pill CSS
  12. 12Scroll-to-Top Floating Button with SVG Progress Ring
  13. 13Floating Chat Widget FAB with Notification Panel
  14. 14Fan and Arc Radial Spread FAB Menu CSS
  15. 15Apple Squircle Superellipse Floating Button CSS
  16. 16Social Share Floating Button Cluster CSS
  17. 17Glassmorphism Floating Action Button with Backdrop Blur
  18. 18Cyberpunk Neon Glow Floating Button CSS
  19. 19Floating Compose Button with Tooltip on Hover CSS
  20. 20Draggable Floating Action Button with Corner Snap CSS
  21. 21Notification Bell Floating Button with Badge Counter
  22. 22Floating Cart Button with Live Badge Counter CSS
  23. 23Magnetic Cursor Follower Floating Button CSS
  24. 24Dark Mode Theme Toggle Floating Button CSS
  25. 25Classic Gradient Circle Plus FAB CSS
  26. 26Pulse Ring Attention-Getter Floating Button CSS
  27. 27Pill-Shaped FAB with Icon and Text Label CSS
  28. 28Neo-Brutalist Hard Shadow Floating Button CSS
  29. 29Floating Button with Loading Spinner State CSS
  30. 30Draggable Floating Button with 6-Dot Grip Handle CSS
  31. 31Voice Recording Microphone Floating Button CSS
  32. 32Aurora Gradient Drift Premium Floating Button CSS
  33. 33Quick Emoji Reply Reaction Floating Button CSS
  34. 34Modern Squircle Rounded Square FAB CSS
Pure CSSMIT licensed

iOS-Style Compose Floating Button

What a compose button looks like on iOS: translucent rather than opaque, sitting on a blurred plate that picks up the colour of the content scrolling underneath, with a spring-loaded press that overshoots on release. Also handles the two things web clones forget — env(safe-area-inset-bottom) so the button clears the home indicator, and a specular top highlight that makes the glass read as a physical lens.

Live Demo
Try it

Nucleo: 44,000+ SVG icons in five families · All Icons Bundle $149

Nucleo · Affiliate link

Get the Nucleo bundle

The code

<section class="fb-02" aria-label="iOS style floating compose button demo">
  <div class="fb-02__stage">
    <div class="fb-02__phone">
      <div class="fb-02__screen">
        <div class="fb-02__status"><span>9:41</span><span class="fb-02__statusR"><i class="fb-02__sig"></i><i class="fb-02__bat"></i></span></div>
        <div class="fb-02__nav"><span class="fb-02__navTitle">Notes</span><span class="fb-02__navSub">iCloud · 24 notes</span></div>
        <div class="fb-02__scroll">
          <article class="fb-02__note"><b>Type scale for 2027</b><span>Variable weight axis on the display face, 3 optical sizes…</span><time>Yesterday</time></article>
          <article class="fb-02__note"><b>FAB motion spec</b><span>Press 90ms in, 380ms spring out, overshoot 1.04 max…</span><time>Tuesday</time></article>
          <article class="fb-02__note fb-02__note--img"><b>Studio moodboard</b><span>Warm concrete, brushed steel, one hot accent.</span><time>Mon</time></article>
          <article class="fb-02__note"><b>Glass tokens</b><span>blur 22, saturate 180, tint 78% — anything more is soup.</span><time>Mon</time></article>
        </div>
        <button class="fb-02__compose" type="button" aria-label="Compose a new note">
          <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M4 20h4l10.5-10.5-4-4L4 16v4z" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round"/><path d="M14.5 5.5l4 4" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/></svg>
        </button>
        <div class="fb-02__home" aria-hidden="true"></div>
      </div>
    </div>
    <div class="fb-02__copy">
      <p class="fb-02__eyebrow">backdrop-filter · spring easing</p>
      <h2 class="fb-02__title">Glass that samples the scroll</h2>
      <p class="fb-02__sub">Press it. Fast in at 90ms, springy out at 380ms with a 4% overshoot — the asymmetry is the whole trick.</p>
      <p class="fb-02__chip">blur(22px) saturate(180%) · env(safe-area-inset-bottom)</p>
    </div>
  </div>
</section>
.fb-02 {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: block;
  background: var(--fb-02-bg);
  --fb-02-bg: radial-gradient(120% 90% at 15% 0%,oklch(0.34 0.09 265),oklch(0.19 0.04 265) 62%);
  --fb-02-tint: oklch(0.63 0.19 258);
  --fb-02-ink: oklch(0.97 0.01 265);
  --fb-02-mut: oklch(0.78 0.02 265);
  font-family: -apple-system,'SF Pro Text','Segoe UI',system-ui,sans-serif;
  color: var(--fb-02-ink);
  display: grid;
  place-items: center;
  padding: clamp(20px,4vw,52px);
}

.fb-02 *,
.fb-02 *::before,
.fb-02 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.fb-02__stage {
  width: min(100%,880px);
  display: grid;
  gap: clamp(24px,4vw,46px);
  justify-items: center;
  align-items: center;
}

.fb-02__phone {
  width: min(92vw,320px);
  aspect-ratio: 9/19;
  padding: 11px;
  border-radius: 52px;
  background: linear-gradient(160deg,oklch(0.42 0.01 265),oklch(0.2 0.01 265));
  box-shadow: 0 40px 90px -30px oklch(0.1 0.03 265/.85),inset 0 1px 0 oklch(1 0 0/.28);
}

.fb-02__screen {
  position: relative;
  height: 100%;
  border-radius: 42px;
  overflow: hidden;
  background: oklch(0.99 0.004 265);
  color: oklch(0.2 0.01 265);
  display: flex;
  flex-direction: column;
  isolation: isolate;
}

.fb-02__status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 22px 2px;
  font-size: 12.5px;
  font-weight: 650;
}

.fb-02__statusR {
  display: flex;
  align-items: center;
  gap: 5px;
}

.fb-02__sig {
  width: 15px;
  height: 10px;
  background: currentColor;
  clip-path: polygon(0 70%,22% 70%,22% 100%,0 100%,0 70%,33% 45%,55% 45%,55% 100%,33% 100%,33% 45%,66% 22%,88% 22%,88% 100%,66% 100%);
}

.fb-02__bat {
  width: 22px;
  height: 11px;
  border: 1.4px solid currentColor;
  border-radius: 3px;
  position: relative;
}

.fb-02__bat::after {
  content: "";
  position: absolute;
  inset: 1.6px;
  width: 62%;
  background: currentColor;
  border-radius: 1px;
}

.fb-02__nav {
  padding: 6px 20px 10px;
  display: grid;
  gap: 1px;
}

.fb-02__navTitle {
  font-size: 27px;
  font-weight: 750;
  letter-spacing: -.03em;
}

.fb-02__navSub {
  font-size: 11.5px;
  color: oklch(0.58 0.01 265);
}

.fb-02__scroll {
  flex: 1;
  overflow: auto;
  padding: 0 14px 96px;
  display: grid;
  gap: 9px;
  align-content: start;
  scrollbar-width: none;
}

.fb-02__scroll::-webkit-scrollbar {
  display: none;
}

.fb-02__note {
  display: grid;
  gap: 3px;
  padding: 13px 15px;
  border-radius: 15px;
  background: oklch(0.96 0.006 265);
}

.fb-02__note b {
  font-size: 14px;
  font-weight: 640;
  letter-spacing: -.01em;
}

.fb-02__note span {
  font-size: 12px;
  line-height: 1.45;
  color: oklch(0.55 0.01 265);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fb-02__note time {
  font-size: 10.5px;
  color: oklch(0.65 0.01 265);
  font-variant-numeric: tabular-nums;
}

.fb-02__note--img {
  background: linear-gradient(180deg,oklch(0.35 0.06 40/.72),oklch(0.22 0.05 40/.9)),url("https://images.unsplash.com/photo-1487958449943-2429e8be8625?q=80&w=900&auto=format&fit=crop") center/cover;
  color: oklch(0.98 0.01 40);
}

.fb-02__note--img span,
.fb-02__note--img time {
  color: oklch(0.9 0.02 40);
}

.fb-02__compose {
  position: absolute;
  right: 18px;
  bottom: calc(30px + env(safe-area-inset-bottom));
  z-index: 3;
  inline-size: 58px;
  block-size: 58px;
  border: 0;
  border-radius: 22px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: oklch(0.99 0.01 258);
  background: color-mix(in oklch,var(--fb-02-tint) 78%,transparent);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 1px 0 oklch(1 0 0/.55),inset 0 -1px 0 oklch(0 0 0/.1),0 10px 30px -8px oklch(0.2 0.06 258/.5);
  transition: transform .38s cubic-bezier(.2,1.5,.4,1),box-shadow .3s ease;
}

.fb-02__compose svg {
  width: 25px;
  height: 25px;
}

.fb-02__compose:hover {
  box-shadow: inset 0 1px 0 oklch(1 0 0/.6),0 14px 34px -8px oklch(0.2 0.06 258/.62);
}

.fb-02__compose:active {
  transform: scale(.9);
  transition-duration: .09s;
}

.fb-02__compose:focus-visible {
  outline: 3px solid oklch(0.99 0.01 258);
  outline-offset: 3px;
}

.fb-02__home {
  position: absolute;
  left: 50%;
  bottom: 8px;
  translate: -50% 0;
  width: 118px;
  height: 5px;
  border-radius: 99px;
  background: oklch(0.2 0.01 265/.35);
}

.fb-02__copy {
  display: grid;
  gap: 11px;
  justify-items: center;
  text-align: center;
  max-width: 52ch;
}

.fb-02__eyebrow {
  font-family: ui-monospace,Menlo,Consolas,monospace;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: oklch(0.8 0.12 258);
}

.fb-02__title {
  font-size: clamp(25px,4.2vw,40px);
  line-height: 1.07;
  letter-spacing: -.03em;
  font-weight: 700;
  text-wrap: balance;
}

.fb-02__sub {
  font-size: clamp(13.5px,1.7vw,16.5px);
  line-height: 1.6;
  color: var(--fb-02-mut);
  text-wrap: pretty;
}

.fb-02__chip {
  font-family: ui-monospace,Menlo,Consolas,monospace;
  font-size: 11px;
  color: var(--fb-02-mut);
  padding: 8px 14px;
  border: 1px solid oklch(1 0 0/.16);
  border-radius: 99px;
}

@media (min-width: 800px) {
  .fb-02__stage {
    grid-template-columns: auto 1fr;
  }

  .fb-02__copy {
    text-align: left;
    justify-items: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fb-02__compose {
    transition: none;
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Floating Button from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: iOS-Style Compose Floating Button
Source: https://codefronts.com/components/css-floating-buttons/ios-style-compose-floating-button/

What a compose button looks like on iOS: translucent rather than opaque, sitting on a blurred plate that picks up the colour of the content scrolling underneath, with a spring-loaded press that overshoots on release. Also handles the two things web clones forget — env(safe-area-inset-bottom) so the button clears the home indicator, and a specular top highlight that makes the glass read as a physical lens.
## HTML
```html
<section class="fb-02" aria-label="iOS style floating compose button demo">
  <div class="fb-02__stage">
    <div class="fb-02__phone">
      <div class="fb-02__screen">
        <div class="fb-02__status"><span>9:41</span><span class="fb-02__statusR"><i class="fb-02__sig"></i><i class="fb-02__bat"></i></span></div>
        <div class="fb-02__nav"><span class="fb-02__navTitle">Notes</span><span class="fb-02__navSub">iCloud · 24 notes</span></div>
        <div class="fb-02__scroll">
          <article class="fb-02__note"><b>Type scale for 2027</b><span>Variable weight axis on the display face, 3 optical sizes…</span><time>Yesterday</time></article>
          <article class="fb-02__note"><b>FAB motion spec</b><span>Press 90ms in, 380ms spring out, overshoot 1.04 max…</span><time>Tuesday</time></article>
          <article class="fb-02__note fb-02__note--img"><b>Studio moodboard</b><span>Warm concrete, brushed steel, one hot accent.</span><time>Mon</time></article>
          <article class="fb-02__note"><b>Glass tokens</b><span>blur 22, saturate 180, tint 78% — anything more is soup.</span><time>Mon</time></article>
        </div>
        <button class="fb-02__compose" type="button" aria-label="Compose a new note">
          <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M4 20h4l10.5-10.5-4-4L4 16v4z" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round"/><path d="M14.5 5.5l4 4" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/></svg>
        </button>
        <div class="fb-02__home" aria-hidden="true"></div>
      </div>
    </div>
    <div class="fb-02__copy">
      <p class="fb-02__eyebrow">backdrop-filter · spring easing</p>
      <h2 class="fb-02__title">Glass that samples the scroll</h2>
      <p class="fb-02__sub">Press it. Fast in at 90ms, springy out at 380ms with a 4% overshoot — the asymmetry is the whole trick.</p>
      <p class="fb-02__chip">blur(22px) saturate(180%) · env(safe-area-inset-bottom)</p>
    </div>
  </div>
</section>
```
## CSS
```css
.fb-02 {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: block;
  background: var(--fb-02-bg);
  --fb-02-bg: radial-gradient(120% 90% at 15% 0%,oklch(0.34 0.09 265),oklch(0.19 0.04 265) 62%);
  --fb-02-tint: oklch(0.63 0.19 258);
  --fb-02-ink: oklch(0.97 0.01 265);
  --fb-02-mut: oklch(0.78 0.02 265);
  font-family: -apple-system,'SF Pro Text','Segoe UI',system-ui,sans-serif;
  color: var(--fb-02-ink);
  display: grid;
  place-items: center;
  padding: clamp(20px,4vw,52px);
}

.fb-02 *,
.fb-02 *::before,
.fb-02 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.fb-02__stage {
  width: min(100%,880px);
  display: grid;
  gap: clamp(24px,4vw,46px);
  justify-items: center;
  align-items: center;
}

.fb-02__phone {
  width: min(92vw,320px);
  aspect-ratio: 9/19;
  padding: 11px;
  border-radius: 52px;
  background: linear-gradient(160deg,oklch(0.42 0.01 265),oklch(0.2 0.01 265));
  box-shadow: 0 40px 90px -30px oklch(0.1 0.03 265/.85),inset 0 1px 0 oklch(1 0 0/.28);
}

.fb-02__screen {
  position: relative;
  height: 100%;
  border-radius: 42px;
  overflow: hidden;
  background: oklch(0.99 0.004 265);
  color: oklch(0.2 0.01 265);
  display: flex;
  flex-direction: column;
  isolation: isolate;
}

.fb-02__status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 22px 2px;
  font-size: 12.5px;
  font-weight: 650;
}

.fb-02__statusR {
  display: flex;
  align-items: center;
  gap: 5px;
}

.fb-02__sig {
  width: 15px;
  height: 10px;
  background: currentColor;
  clip-path: polygon(0 70%,22% 70%,22% 100%,0 100%,0 70%,33% 45%,55% 45%,55% 100%,33% 100%,33% 45%,66% 22%,88% 22%,88% 100%,66% 100%);
}

.fb-02__bat {
  width: 22px;
  height: 11px;
  border: 1.4px solid currentColor;
  border-radius: 3px;
  position: relative;
}

.fb-02__bat::after {
  content: "";
  position: absolute;
  inset: 1.6px;
  width: 62%;
  background: currentColor;
  border-radius: 1px;
}

.fb-02__nav {
  padding: 6px 20px 10px;
  display: grid;
  gap: 1px;
}

.fb-02__navTitle {
  font-size: 27px;
  font-weight: 750;
  letter-spacing: -.03em;
}

.fb-02__navSub {
  font-size: 11.5px;
  color: oklch(0.58 0.01 265);
}

.fb-02__scroll {
  flex: 1;
  overflow: auto;
  padding: 0 14px 96px;
  display: grid;
  gap: 9px;
  align-content: start;
  scrollbar-width: none;
}

.fb-02__scroll::-webkit-scrollbar {
  display: none;
}

.fb-02__note {
  display: grid;
  gap: 3px;
  padding: 13px 15px;
  border-radius: 15px;
  background: oklch(0.96 0.006 265);
}

.fb-02__note b {
  font-size: 14px;
  font-weight: 640;
  letter-spacing: -.01em;
}

.fb-02__note span {
  font-size: 12px;
  line-height: 1.45;
  color: oklch(0.55 0.01 265);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fb-02__note time {
  font-size: 10.5px;
  color: oklch(0.65 0.01 265);
  font-variant-numeric: tabular-nums;
}

.fb-02__note--img {
  background: linear-gradient(180deg,oklch(0.35 0.06 40/.72),oklch(0.22 0.05 40/.9)),url("https://images.unsplash.com/photo-1487958449943-2429e8be8625?q=80&w=900&auto=format&fit=crop") center/cover;
  color: oklch(0.98 0.01 40);
}

.fb-02__note--img span,
.fb-02__note--img time {
  color: oklch(0.9 0.02 40);
}

.fb-02__compose {
  position: absolute;
  right: 18px;
  bottom: calc(30px + env(safe-area-inset-bottom));
  z-index: 3;
  inline-size: 58px;
  block-size: 58px;
  border: 0;
  border-radius: 22px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: oklch(0.99 0.01 258);
  background: color-mix(in oklch,var(--fb-02-tint) 78%,transparent);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 1px 0 oklch(1 0 0/.55),inset 0 -1px 0 oklch(0 0 0/.1),0 10px 30px -8px oklch(0.2 0.06 258/.5);
  transition: transform .38s cubic-bezier(.2,1.5,.4,1),box-shadow .3s ease;
}

.fb-02__compose svg {
  width: 25px;
  height: 25px;
}

.fb-02__compose:hover {
  box-shadow: inset 0 1px 0 oklch(1 0 0/.6),0 14px 34px -8px oklch(0.2 0.06 258/.62);
}

.fb-02__compose:active {
  transform: scale(.9);
  transition-duration: .09s;
}

.fb-02__compose:focus-visible {
  outline: 3px solid oklch(0.99 0.01 258);
  outline-offset: 3px;
}

.fb-02__home {
  position: absolute;
  left: 50%;
  bottom: 8px;
  translate: -50% 0;
  width: 118px;
  height: 5px;
  border-radius: 99px;
  background: oklch(0.2 0.01 265/.35);
}

.fb-02__copy {
  display: grid;
  gap: 11px;
  justify-items: center;
  text-align: center;
  max-width: 52ch;
}

.fb-02__eyebrow {
  font-family: ui-monospace,Menlo,Consolas,monospace;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: oklch(0.8 0.12 258);
}

.fb-02__title {
  font-size: clamp(25px,4.2vw,40px);
  line-height: 1.07;
  letter-spacing: -.03em;
  font-weight: 700;
  text-wrap: balance;
}

.fb-02__sub {
  font-size: clamp(13.5px,1.7vw,16.5px);
  line-height: 1.6;
  color: var(--fb-02-mut);
  text-wrap: pretty;
}

.fb-02__chip {
  font-family: ui-monospace,Menlo,Consolas,monospace;
  font-size: 11px;
  color: var(--fb-02-mut);
  padding: 8px 14px;
  border: 1px solid oklch(1 0 0/.16);
  border-radius: 99px;
}

@media (min-width: 800px) {
  .fb-02__stage {
    grid-template-columns: auto 1fr;
  }

  .fb-02__copy {
    text-align: left;
    justify-items: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fb-02__compose {
    transition: none;
  }
}
```

How this works

The Apple look is three stacked layers on one element. A blurred plate, a translucent tint, and a light edge:

.compose{ background:color-mix(in oklch, var(--tint) 78%, transparent);
  backdrop-filter:blur(22px) saturate(180%);
  box-shadow:inset 0 1px 0 rgb(255 255 255/.55),  /* specular top edge */
             inset 0 -1px 0 rgb(0 0 0/.08),
             0 10px 30px -8px rgb(0 0 0/.35);
  transition:transform .38s cubic-bezier(.2,1.5,.4,1); }
.compose:active{ transform:scale(.9); transition-duration:.09s }

The motion is the signature. iOS presses are fast in, springy out: the active state uses a 90ms linear-ish shrink, and releasing hands control back to a bouncy cubic-bezier with an overshoot past 1. Using one symmetrical transition for both directions is the single biggest reason web buttons feel non-native.

backdrop-filter only samples what is actually painted behind the element, so the button must not be inside a stacking context that isolates it from the scrolling list — no overflow:hidden ancestor with its own backdrop, no filter on the parent. Safe-area handling is one line: bottom:calc(20px + env(safe-area-inset-bottom)), which is 20px in a browser and clears the home indicator on a real device.

Make it yours

  • Tinted glass: change --fb-02-tint to any accent. Keep it above 70% in the color-mix or the icon loses contrast against bright content.
  • Pill compose: set inline-size:auto; padding-inline:22px; border-radius:99px and add a label — the same glass recipe covers Apple's capsule buttons.
  • Bottom bar: duplicate the plate as a full-width element with padding-bottom:env(safe-area-inset-bottom) for an iOS-style floating toolbar.
  • Dark mode: swap the specular edge to rgb(255 255 255/.22) and raise the tint's lightness — glass needs a brighter rim on dark backgrounds, not a darker one.

Gotchas — read before shipping

  • backdrop-filter is expensive on large areas. Keep it on small floating elements; a full-screen blurred layer will drop frames on mid-range Android.
  • Any ancestor with filter, transform or will-change creates a containing block that can flatten the blur — check the parent chain if the glass looks grey.
  • env() insets are 0 unless the page ships viewport-fit=cover in its viewport meta. Without it your safe-area calc silently does nothing.
  • Overshoot easing on a large element reads as a bug, not a bounce. Keep spring transforms under ~1.06 scale and under 400ms.

Browser support

ChromeSafariFirefoxEdge
114+17.5+121+114+

Floor set by oklch(), color-mix(), backdrop-filter, text-wrap as this demo is written. The core technique itself goes back further — Chrome 111+.

backdrop-filter is unprefixed in Chrome 76+, Safari 18+ (with -webkit- back to Safari 9) and Firefox 103+. env(safe-area-inset-*) is Safari 11+ and Chrome 69+; both degrade to a solid button.

Techniques used in this demo

scrollbar-gutter / -width / -colorMDN ↗aspect-ratioMDN ↗backdrop-filterMDN ↗clip-pathMDN ↗text-wrap: prettyMDN ↗radial-gradient()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →