Color format converter
Convert HEX, RGB and HSL colors with alpha transparency, preview the swatch and copy ready-to-use CSS color values.
CSS Flexbox layout generator
Explore flex direction, wrapping, spacing and alignment in a live layout, with ready-to-copy CSS and HTML.
About this tool
Explore flex direction, wrapping, spacing and alignment in a live layout, with ready-to-copy CSS and HTML.
How to use
Choose direction, wrapping, main-axis distribution and cross-axis alignment. Adjust the gap and number of items, then vary the preview width to see how wrapping changes. Switch between CSS and HTML to copy or download both parts.
The preview uses the same flex properties as the output. Items start with a 100 px basis and an 80 px minimum height; customize these for your content. Supports up to 48 items and gaps from 0 to 80 px. Preview width is not included in the exported CSS.
Related tools
Color contrast checker
Check WCAG 2.2 text contrast with a live preview and separate AA and AAA results for normal and large text.
CSS gradient generator
Build linear or radial gradients with two to eight editable color stops, a live preview and copyable CSS.
CSS box shadow generator
Adjust offset, blur, spread, color and opacity with a live preview, then copy a box-shadow declaration for an outer or inset shadow.
Comments
0