Set layout and animation properties with simple controls, watch the live preview, and copy clean CSS for your own project.
Flexbox and Grid properties interact in ways that are easier to see than to read about: what space-between does when items wrap, how align-items: baseline lines up boxes of different heights, or how minmax() behaves as the container shrinks. This page lets you set those properties with drop-downs and number fields, watch a live preview, and copy the matching CSS. A third tab builds a @keyframes animation from twelve presets. It is useful for learning layout, prototyping a component, or checking a property value before you write it into your stylesheet.
Choose Direction (row, row-reverse, column, column-reverse), Wrap, Justify Content (six options including space-evenly) and Align Items, then set Gap in pixels and Items Count (1–20). Some preview items have extra padding on purpose so that alignment differences are visible. The code box shows a .container rule with your settings and a starter .item rule.
Set Columns and Rows (1–12 each), Gap, and a size for columns (1fr, auto or minmax(100px,1fr)) and rows (auto, 1fr or minmax(80px,auto)). The preview fills every cell with a numbered box, and the output uses grid-template-columns: repeat(n, size) and the same for rows.
Pick a Preset (fade in or out, four slides, bounce, spin, pulse, shake, flip or zoom in), then Duration and Delay in seconds, a Timing function and an Iteration count (1, 2, 3 or infinite). Changing a setting updates the code immediately; click Play Animation to run it on the preview box. The output contains the @keyframes block and an .element rule using the animation shorthand in the order name, duration, timing function, delay, iteration count.
On every tab, Copy CSS puts the code on your clipboard. Rename .container, .item or .element to match your own markup.
Each control change applies the same property values to the preview element's inline style and rebuilds the code text from a template, so the preview matches what the copied container rule does in the same browser. Play Animation inserts the chosen keyframes into a small style element on the page and restarts the animation by resetting it. Nothing is sent to a server, and no settings are saved; reloading the page restores the defaults.
The generated rules use widely supported standard properties. The gap property for flex containers has been supported by all major browsers since 2021; very old browsers such as Internet Explorer do not support it and ignore Grid entirely.
Flexbox arranges items along one axis and lets their content decide the size, which suits toolbars, button groups and centred content. Grid controls rows and columns together, which suits page layouts, card galleries and dashboards. They combine well: a Grid page layout with Flexbox inside each cell is a common pattern.
This generator creates a fixed number of columns. For a grid that adapts to screen width, replace the column value in the copied CSS with repeat(auto-fill, minmax(200px, 1fr)), adjusting 200px to your minimum card width.
Settings update the code but do not restart the preview. Click Play Animation again. Presets with an iteration count of infinite keep running until you pick another preset and play it.
Yes. Some visitors turn on a reduce-motion setting in their operating system. Wrap large movement such as slides, spins and flips in @media (prefers-reduced-motion: no-preference) or shorten them for those users.