CSS Dynamic Island Demo

A CSS Dynamic Island is a pill-shaped UI element created entirely with CSS, inspired by Apple's Dynamic Island on iPhone 14 Pro and newer models. It's a versatile, animated capsule that can expand, shrink, and transform to display notifications, alerts, music info, timers, and more. The pill shape is achieved using a border-radius value equal to or greater than half the element's height, combined with fixed dimensions.

To create a pill shape in CSS, set a fixed width and height on a div, then apply a border-radius equal to at least half the height. For example: width: 126px; height: 37px; border-radius: 20px;. The large border-radius forces the left and right edges to become fully rounded semicircles, producing the characteristic pill or capsule shape. Add background-color for the fill and optionally box-shadow for depth.

You can animate a pill shape using CSS @keyframes and the animation property. Common animations include: breathing (gentle scale), pulse (stronger scale with glow), expand & shrink (horizontal scaleX transform), bounce (translateY), glow pulse (box-shadow animation), and shimmer (animated gradient background). Use animation: name duration easing infinite; for continuous effects. Combine with transition for smooth state changes.

Apple's Dynamic Island on the iPhone 14 Pro measures approximately 126px × 37px in its default state on the actual device screen. In CSS implementations for web, common sizes range from 80px–300px wide and 25px–55px tall, depending on the design context. The expanded state can be up to 1.5× to 2× wider than the default. The border-radius is typically 18px–22px for the standard size.

CSS pill shape animations are widely supported across all modern browsers: Chrome 90+, Firefox 88+, Safari 14+, Edge 90+, and Opera 76+. The core properties (border-radius, transform, animation, box-shadow) have excellent cross-browser support. For older browsers, the pill shape will still render correctly; only the animations may fall back to a static display. Use @supports queries if you need graceful degradation.

Absolutely! A CSS Dynamic Island is a great UI element for notification toasts, floating action buttons, music player widgets, status indicators, and live activity displays. It works well in web apps, dashboards, and mobile-first designs. Since it's built with pure CSS, it's lightweight, performant, and doesn't require any JavaScript for basic animations. Just copy the generated CSS from this tool and adapt it to your project.

To make a pill shape responsive, use relative units like vw, %, or clamp() for width and height. For example: width: clamp(80px, 20vw, 200px);. You can also use CSS media queries to adjust the pill dimensions at different breakpoints. The border-radius should be recalculated — using border-radius: 50vh or a sufficiently large value like 999px ensures the pill shape is maintained regardless of size.

border-radius: 50% creates a perfect circle or ellipse (depending on the element's aspect ratio). A pill shape uses a fixed large pixel value (like 20px) that's at least half the element's height, creating semicircular ends connected by straight edges. This produces the distinctive capsule form. If you use border-radius: 50% on a wide element, it becomes an oval, not a pill. For the classic pill, use a fixed radius ≥ half the height.

Adding inner content is straightforward: place HTML elements (like <i> for icons, <span> for text, or <img> for avatars) inside the pill div. Use Flexbox (display: flex; align-items: center; gap: 6px; padding: 0 12px;) to align content horizontally. For the Dynamic Island effect, the content can change based on the pill's expanded state. Use overflow: hidden; to keep content neatly clipped within the rounded shape.

Yes, CSS animations on pill shapes are very performant when you animate GPU-accelerated properties: transform (scale, translate, rotate) and opacity. Avoid animating width, height, or border-radius directly for best performance — use transform: scaleX() for width changes instead. The box-shadow animation (glow effects) is slightly more expensive but still smooth on modern devices. Use will-change: transform sparingly for complex animations.