UD5 Toolkit
word‑break & overflow‑wrap Playground - Online Text Wrapping
Compare break‑all, keep‑all, and overflow‑wrap: anywhere/break‑word. Paste long words and see how they wrap.
box‑decoration‑break Demo - Online Inline Box Fragmentation
box-decoration-break Demo & Generator
See how slice and clone change the appearance of inline and multi‑column fragments in real time. Tune the CSS properties and copy the code.
box-decoration-break
Tip: The demo boxes below look best when the inline text wraps onto multiple lines. Resize your browser or view on a smaller screen to see the fragmentation more clearly.
Inline Fragmentation
This is a fragment that breaks across lines to illustrate how box-decoration-break works.
↑ The
<span> may wrap to multiple lines → observe borders, background and radius.Column Fragmentation
This entire block of text is inside a multi‑column container. Notice the background and border repeat or slice across column boundaries.
↑
column-count: 2 applied to the container. The <span> breaks between columns.Frequently Asked Questions
The CSS property
box-decoration-break controls how element decorations (background, border, border-radius, box-shadow, etc.) are drawn when an inline element breaks across lines, columns, or pages. It accepts two values: slice (default) and clone.slice treats the element as one continuous box; decorations are sliced at break points so that the pieces fit together (like cutting a picture into two). clone gives each fragment its own complete set of decorations – each line/column/page gets its own border, background and rounded corners as if they were separate elements.
Use
clone when you want each visible fragment of an element to look like a self‑contained styled box – for example, highlighted text in articles, tags that break across lines, or decorative inline elements that should have rounded borders on every piece.No, it only applies to inline-level elements or fragments inside a multi‑column, flex, or grid layout where an element is split across lines, columns or pages. Block boxes are not affected.
box-decoration-break is supported in all modern browsers (Chrome, Firefox, Safari, Edge) and has been for many years. Always test in your target browsers if you rely on exact rendering.With the default
slice mode, shadows and rounded corners are only applied to the whole box edge, which can disappear at break points. Switch to clone to see the full effect on each fragment.Critical CSS Extractor - Online Inline Above‑the‑Fold Styles
Paste your full CSS and HTML; automatically identify and extract the styles needed for the visible part. Reduce render‑blocking resources.
text‑spacing CSS Demo - Online trim‑start & space‑first
New CSS text‑spacing property for fine control over punctuation spacing. See the effect live. For advanced typography.
scrollbar‑gutter Tester - Online Prevent Layout Shift
Toggle scrollbar‑gutter: stable to reserve space for the scrollbar and avoid content jumps. Visual demo with two columns.
Vertical Text Layout Generator - Online writing‑mode CSS
Create vertically oriented text layouts with `writing‑mode`. See the effect and copy the complete CSS. For vertical languages.
CSS Grid Named Lines Demo - Online Complex Layouts
Use named grid lines instead of column numbers. See how they simplify placement. Visual, interactive learning.
Text Decoration CSS Generator - Online Underline & Strike
Style underlines, overlines, and strike-throughs with colors, wavy styles, and thickness. Modern CSS text‑decoration.
CJK Text Line Break Tester - Online word‑break & line‑break
Test different line‑break and word‑break values on Chinese/Japanese/Korean text. See how browsers wrap. Essential for i18n.
Glassmorphism Card Builder - Online Frosted UI Developer
Create a frosted glass card with background blur, border glow, and shadow. Adjust intensity. Copy the CSS.
CSS Grid Auto Placement Demo - Online How Items Flow
See how grid-auto-flow: row vs column changes item placement. Add and remove items to understand the algorithm. Visual.
Background‑Blend‑Mode Explorer - Online Layer Patterns
Stack multiple background images and blend them with colors. Create unique textures. Copy the CSS code instantly.
text‑indent & hanging‑punctuation Demo - Online
Set up first‑line indentation and hanging punctuation. See how they affect reading flow. Copy the CSS.
CSS Drop Cap Generator - Online Fancy First Letter
Style the first letter of a paragraph as a large decorative drop cap. Choose font, color, and size. Get the CSS & HTML.
transform‑style: preserve‑3d Tester - Online 3D Nesting
Nest elements in 3D space with preserve‑3d vs flat. Rotate the parent and see children behave differently.
CSS Glassmorphism Generator - Online Frosted UI Design
Visually create the glassmorphism effect: background blur, transparency, and border. Copy the complete CSS. Modern UI design.
CSS drop‑shadow() Filter Generator - Online Box vs Text Shadow
Apply the drop‑shadow() filter and compare it with box‑shadow. See how it follows the contour of transparent images. Copy code.
Logical Sizing Properties Demo - Online block‑size & inline‑size
Compare width/height with block‑size/inline‑size in different writing modes. Understand intrinsic sizing. Copy best practices.
Crossword Puzzle Maker - Online Simple Grid Builder
Build a small crossword by adding words and clues. Export as a printable PNG or JSON. For classroom and fun.
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.
!important Remover - Online Clean Up Overqualified Rules
Paste your CSS and strip all `!important` declarations in one click. See a list of affected rules. Local tool.
CSS Background Pattern Generator - Online Stripes, Dots & Checks
Create seamless CSS background patterns like stripes, polka dots, checkerboard. Adjust size and colors. Copy the tiny CSS.
Name Tent Generator - Online Print Foldable Desk Cards
Type names and generate folded name tents for desks. Print, cut, fold. Great for workshops and panels.
overscroll‑behavior Tester - Online Prevent Pull‑to‑Refresh
Test overscroll‑behavior: contain to prevent background scroll or pull‑to‑refresh. See the effect in a live demo.
CSS Grid Area Template Generator - Online Visual Naming
Visually name grid areas in a table and generate grid‑template‑areas CSS. Perfect for complex layouts. Drag‑free.
Folding Fitted Sheet Guide – Online Step‑by‑Step Animation
Animated SVG steps showing how to fold a fitted sheet perfectly. Clean visual reference.
CSS Smooth Scroll Demo - Online scroll‑behavior
Toggle scroll‑behavior: smooth and click anchor links to see the scrolling animation. Implement modern UX.
CSS Text Stroke Generator - Online Outline Text Effect
Create outlined text with the text‑stroke property. Adjust width and color. Preview and copy the CSS.
initial‑letter CSS Playground - Online Drop Caps
Style a drop cap using the initial‑letter property. Set size and sink. Modern alternative to pseudo‑element hacks.
initial‑letter CSS Playground - Online Drop Caps
Style a drop cap using the initial‑letter property. Set size and sink. Modern alternative to pseudo‑element hacks.
Crossword Builder - Online Create & Solve Simple Puzzles
Build a small crossword by adding words and clues. Export as a printable grid or solve in browser. Perfect for classrooms.