Overview
Choose a CSS `resize` value (none, both, horizontal, or vertical) and an `overflow` value (auto, hidden, or scroll), then drag the live preview box directly using the browser's own native resize handle - the preview is not a JavaScript drag simulation, it is the real `resize` CSS property doing the resizing. The `resize` property only has a visible effect on an element whose `overflow` is set to something other than the default `visible`, so this tool pairs the two controls together and calls that out explicitly rather than leaving overflow untouched and leaving you to wonder why the handle never appears. Useful for building a resizable textarea, panel, or card without needing JavaScript. Runs entirely client-side.
Best for: Making a textarea, panel, or card user-resizable without writing JavaScript
How to use this tool
- Pick a resize direction. none, both, horizontal, or vertical.
- Pick an overflow value. resize only works when overflow is not the default visible.
- Drag the real handle. The preview box uses the actual CSS resize property - drag it directly.
Frequently asked questions
The CSS `resize` property requires `overflow` to be something other than its default `visible` value. Set overflow to auto, hidden, or scroll and the handle will appear.
No - the preview box uses the real, native CSS `resize` property. Dragging its handle is native browser behavior, not a simulated drag handler.