CSS Edge

Showing 63 of 63 examples

Sort by

NEWComponents & InteractivityProduction ready

Making the background inert while a modal is open

inert

Setting inert on an element — via the plain HTML attribute or the matching el.inert JS property — removes it and everything inside it from click handling, tab order, text selection, and the accessibility tree, all in one step. Opening the modal below marks the background section inert instead of juggling tabindex="-1" on every focusable descendant by hand; closing it restores normal interaction.

View code

HTML

<div class="demo-area">
  <div id="background" class="panel">
    <p style="margin:0">Background content</p>
    <input type="text" placeholder="Try typing or tabbing here">
    <button id="bg-btn">Click me</button>
  </div>
  <button id="open-btn" class="open-btn">Open modal</button>

  <div id="modal" class="modal">
    <p style="margin:0">I'm a modal. The background is now inert — try tabbing, clicking, or typing behind me.</p>
    <button id="close-btn">Close</button>
  </div>
</div>

CSS

body { font-family: system-ui, sans-serif; margin: 2rem; background: #fff; color: #111827; }
.demo-area { position: relative; min-height: 220px; max-width: 260px; }
.panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  transition: opacity 0.2s;
}
.panel[inert] { opacity: 0.45; }
.panel input, .panel button {
  font: inherit;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  border: 1px solid #d1d5db;
}
.open-btn {
  margin-top: 0.75rem;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  background: #2563eb;
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.modal {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.25rem;
  background: #fff;
  border: 2px solid #2563eb;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgb(0 0 0 / 0.15);
}
.modal.is-open { display: flex; }
.modal button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  background: #2563eb;
  color: #fff;
  font: inherit;
  cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  .panel { transition: none; }
}

const background = document.getElementById('background');
const modal = document.getElementById('modal');
const openBtn = document.getElementById('open-btn');
const closeBtn = document.getElementById('close-btn');

openBtn.addEventListener('click', () => {
  background.inert = true;
  openBtn.inert = true;
  modal.classList.add('is-open');
  closeBtn.focus();
});

closeBtn.addEventListener('click', () => {
  background.inert = false;
  openBtn.inert = false;
  modal.classList.remove('is-open');
  openBtn.focus();
});

Chrome 102+Firefox 112+Safari 15.5+Edge 102+

Making the background inert while a modal is open

Staggering a list reveal with an inline custom-property index

A back-to-top button that hides itself with @container scroll-state()

A seamless CSS-only marquee

A CSS-only star rating widget with :has()

CSS-only carousel dots with ::scroll-marker

Doing math on keyword sizes with calc-size()

Animating an element along a curve with offset-path

Detecting which card is snapped with @container scroll-state()

Animating a rotating gradient border with @property

Revealing boxes as they scroll into view

A dropdown menu with anchor positioning and automatic flipping

Animating height: auto with interpolate-size

Drawing lines in grid gaps with row-rule and column-rule

Switching styles by a container's custom property with @container style()

Automatic accessible text color with contrast-color()

Scattering confetti with the CSS random() function

Staggered bar chart from sibling-index() and sibling-count()

Positioning elements around a circle with sin() and cos()

Organic Blob Shapes

Customizing the checkbox tick with ::checkmark

Snapping values to a grid with round()

Writing range media queries with comparison operators

Deriving transparent variants with relative color syntax

Evenly distributing wrapped flex items

Feature-detecting at-rules before using them

Theme-aware images with light-dark()

Sticky positioning across independent scroll axes

A scroll-linked reading progress bar

Organic borders and cut-outs with shape()

Native masonry layout for grid items

A stacking-cards scroll effect with pure CSS

A scroll-spy table of contents with view-timeline

Shrinking a sticky header as the page scrolls

Styling the browser's own Find-in-Page matches

An animated accordion with zero JavaScript

Deriving per-item values with mod() and calc()

Recoloring native form controls in one line

Scoping styles to a subtree with @scope

Validating a field only after the user interacts

Native popovers with the popover attribute

Controlling dialogs declaratively with commandfor

Fully restyling <select> with appearance: base-select

Perceptually uniform color with oklch()

Mixing two colors natively in any color space

Trimming invisible leading space above and below text

Keeping fallback fonts visually consistent

Fixing the mobile 100vh bug with dynamic viewport units

Balancing headline line breaks automatically

Animating elements in with @starting-style

Anchoring a tooltip to any element with pure CSS

Morphing between UI states with the View Transitions API

Linking an animation to scroll position

Writing-direction-agnostic spacing with logical properties

Ordering the cascade explicitly with @layer

Defining and querying a container's own size

Aligning cards of different lengths with subgrid

Font-size-proportional spacing with the lh unit

Styling a form row based on its own invalid input

Native CSS nesting with the & selector

Animatable custom properties with @property

Fluid type sized to its container with cqi

Auto-growing form fields with field-sizing