UD5 Toolkit
CSS Subgrid Layout Builder - Online Align Nested Grids
Design a layout where nested grids share track sizes with their parent via subgrid. Copy the complete CSS.
overscroll‑behavior Tester - Online Prevent Pull‑to‑Refresh
overscroll-behavior Tester
Test and compare how overscroll-behavior CSS property prevents pull-to-refresh and scroll chaining.
Best experienced on mobile — try scrolling each phone simulator to the edge!
Apply to This Page
Set
body { overscroll-behavior-y: none; } to prevent pull-to-refresh on this entire page.
Try it on mobile!
⬆ Overscroll may propagate
⬇ Overscroll may propagate
← Horizontal overscroll-behavior-x: auto →
overscroll-behavior: auto
Default — allows scroll chaining & pull-to-refresh
⬆ Scroll chain blocked
⬇ Scroll chain blocked
← Horizontal overscroll-behavior-x: contain →
overscroll-behavior: contain
Blocks scroll chaining, keeps elastic effect
✓ Overscroll fully prevented
✓ Overscroll fully prevented
← Horizontal overscroll-behavior-x: none →
overscroll-behavior: none
Prevents all overscroll & pull-to-refresh
auto Default
Over-scroll effects propagate to ancestor scroll containers. Pull-to-refresh is enabled on mobile. Best for general web pages.
overscroll-behavior: auto;
contain Balanced
Stops scroll chaining to parent elements. The element retains its own elastic bounce effect. Great for modals & sidebars.
overscroll-behavior: contain;
none Strict
Completely disables over-scroll effects and scroll chaining. Prevents pull-to-refresh on mobile. Ideal for PWAs and full-screen apps.
overscroll-behavior: none;
Frequently Asked Questions
overscroll-behavior is a CSS property that controls what happens when a user scrolls past the boundary of a scrollable area. By default (auto), the scroll momentum "chains" to parent containers and can trigger browser-level actions like pull-to-refresh on mobile. Using contain or none gives you fine-grained control over this behavior, improving UX for modals, drawers, and single-page applications.
overscroll-behavior-y: none is the most effective way to prevent pull-to-refresh. It tells the browser not to perform any default overscroll action, including the pull-to-refresh gesture in Chrome for Android and the rubber-band effect in iOS Safari. Use
contain if you want to keep the elastic bounce within the element but stop it from triggering a page-level refresh.
- contain: The element still shows its own overscroll bounce/glow effect, but the scroll chain is broken — the parent won't scroll. Pull-to-refresh behavior varies by browser; some may still trigger it.
- none: No overscroll effect at all. The scroll hits a hard boundary. Scroll chaining is disabled. Pull-to-refresh is reliably prevented across all modern browsers.
Excellent support: Chrome 63+, Firefox 59+, Edge 79+, Opera 50+, Samsung Internet 8.2+. Safari added support in version 16 (iOS 16+ and macOS Ventura+). For older Safari versions, the property is ignored gracefully, so it's safe to use as a progressive enhancement. Check Can I Use for the latest data.
Common use cases:
- Modals & drawers: Use
overscroll-behavior: containon the modal body so scrolling inside doesn't move the background page. - PWAs: Set
body { overscroll-behavior-y: none; }to prevent accidental pull-to-refresh and make the app feel native. - Horizontal carousels: Use
overscroll-behavior-x: containto prevent horizontal swipe from triggering page navigation gestures. - Chat apps: Apply to message lists to prevent scroll chaining when users flick through conversations.
Yes! Applying
overscroll-behavior-y: none to body or html prevents the entire page from triggering pull-to-refresh. This is commonly used in Progressive Web Apps (PWAs). Try the toggle above on your mobile device to experience it live on this very page.
Browser Support Overview
| Browser | Minimum Version | Notes |
|---|---|---|
| Chrome | 63+ | Full support |
| Firefox | 59+ | Full support |
| Safari | 16+ | macOS Ventura & iOS 16+ |
| Edge | 79+ | Chromium-based, full support |
| Opera | 50+ | Full support |
| Samsung Internet | 8.2+ | Full support |
Pro Tip:
On mobile, open this page and try pulling down on each phone simulator. The auto one may trigger your browser's pull-to-refresh, while none stays firm. Toggle the "Apply to This Page" switch to protect this entire page from accidental refresh!
Scroll Progress Bar Generator - Online CSS‑Only
Create a pure CSS scroll progress indicator using animation‑timeline: scroll(). No JavaScript. Copy the complete code.
CSS Compatibility Linter - Online Check Browser Support
Paste your CSS and see warnings for properties that have limited browser support. Links to CanIUse. Modernize safely.
Permissions Query API Demo - Online Check All APIs
Query the permission state of camera, microphone, geolocation, and more. See the response and learn the API.
touch‑action CSS Playground - Online Gesture Control
Limit browser gestures on an element: pan‑x, pinch‑zoom, manipulation. Draw on a canvas to test. Mobile dev helper.
Web Locks API Demo - Online Resource Coordination
Acquire and release locks across tabs. Prevent race conditions in IndexedDB or localStorage. Visual queue and lock state.
Fullscreen API Tester - Online Request & Exit Demo
Test the Fullscreen API: request fullscreen on a colored div, detect changes, and copy the JavaScript boilerplate.
Advanced CSS Gradient Builder - Online Multi‑Stop & Angle
Create complex linear gradients with any number of color stops, exact angles, and length units. Live preview and CSS code.
Text Decoration CSS Generator - Online Underline & Strike
Style underlines, overlines, and strike-throughs with colors, wavy styles, and thickness. Modern CSS text‑decoration.
CSS Glow Hover Effect - Online Animated Box Shadow
Design a button or card that glows on hover. Adjust shadow color, spread, and transition. Copy the CSS. Rich UI.
CSS Letterpress Text Effect - Online Inset Typography
Create a realistic letterpress (debossed) text effect using CSS text‑shadow and background. Adjust depth and light direction. Copy code.
Noise Texture & Grain Generator - Online CSS Background
Generate a subtle noise/grain texture as a CSS background pattern. Adjust opacity and size. For that film look.
CSS Checkerboard Pattern - Online Background Generator
Create a customizable checkerboard or grid background using pure CSS gradients. Adjust cell size and colors. Copy the code.
Image Blend Mode Tester - Online Overlay Two Photos
Upload two images and apply CSS blend modes (multiply, screen, overlay, etc.). See the result and copy the filter CSS. Pure frontend.
Print CSS Generator - Online Optimize Page for Paper
Add print styles like removing backgrounds, adding page breaks, setting margins. See print preview instantly.
CSS Countdown Number Animation - Online Flip Clock Effect
Create a pure CSS countdown timer with a flipping number effect. Adjust duration and style. No JavaScript needed for display.
Animated Border CSS Generator - Online Glow & Rotate
Create a glowing or rotating border animation around an element. Copy the CSS keyframes. Pure CSS magic.
CSS Progress Bar Generator - Online Animated & Styled
Create a custom HTML/CSS progress bar with percentage, colors, and animation. Copy the code. Modern UI element.
Neon Sign Text Effect - Online Glowing CSS Generator
Design a realistic neon sign text with multiple layers of glow. Copy the CSS and HTML. Perfect for headers.
Flexbox Froggy Simulator - Online Learn CSS Flexbox Game
A replica of the famous Flexbox Froggy game: solve alignment puzzles by writing CSS. Progress saved locally. Fun frontend learning.
Website Color Theme Extractor - Online Grab Palette from CSS
Fetch a website's CSS and extract :root custom properties (‑‑color) to reveal its design token palette. For learning and inspiration.
Elephant Toothpaste Demo Calculator - Online Reaction Ratios
Find safe mixing ratios for the classic elephant toothpaste demonstration. Volume adjustments for different container sizes.
Gradient Match Game - Online Drag & Match Linear CSS
Recreate the target CSS linear gradient by adjusting stops and colors. A unique game for front‑end developers to master gradients.
Font Awesome Cheatsheet - Online Icon Search & Copy
Browse and search all Font Awesome 6 icons with preview, class name, and unicode. Copy the HTML snippet. Perfect for web developers.
Gradient Text CSS Generator - Online Colorful Text Style
Create text with a gradient fill using CSS background-clip. Configure colors and direction. Copy the code. Works in modern browsers.
HTML Color Names - Online Complete List with Hex & Preview
A complete, searchable list of all 140+ named HTML/CSS colors with their hex codes and color previews. Click to copy code. Essential web reference.
Flexbox Playground - Online CSS Flex Layout Generator
Visually experiment with Flexbox container and item properties. See the layout update in real time and copy the CSS. Learn by doing, fully interactive.
Online Code Minifier - JS & CSS Compression Tool
Minify JavaScript and CSS code to reduce file size for production. Remove whitespace and comments instantly. Run locally, your code stays private.
Border Radius CSS Generator - Online Rounded Corners Tool
Easily create asymmetric border radius values and preview the result. Copy the generated CSS instantly. All interactively and browser-based.
CSS Beautifier & Formatter - Online CSS Organizer
Beautify and format your CSS stylesheets instantly. Organize, minify, or prettify CSS code for better readability. Processed securely on client-side.