Choose the tool that answers your design question
Use layout tools when the problem concerns how content fits: Flexbox for a row or column, Grid for coordinated tracks. Use gradients, shadows, and border radius after the structure is working. Typography tools are best reserved for a clear reading or emphasis need.
Each tool lets you inspect a visual change and take the result into your project. The guide below the workspace explains how the property behaves, a small example, and limits to check before using it. Some utilities produce files or review pasted code rather than rendering a visual style.
Generated output is a starting point. Your real font, inherited styles, container width, and content length can change the result. Save the output in your own stylesheet and test it with your page, rather than treating a successful preview as a complete production review.
Try your output in the code editor →