Uitly CSS Generator is a free online visual CSS tool that generates production-ready CSS for flexbox layouts, CSS grid, box shadows, border radius, typography, and spacing with live preview. Export a full CSS class or Tailwind utility class equivalents. No signup required.
Uitly's visual CSS generator creates production-ready CSS for flexbox layouts, CSS grid, box shadows, border radius, typography, and spacing with live preview on every control change. Configure all five property groups and export a CSS class or Tailwind utilities in one click. No signup. No cost.
Writing CSS from scratch means translating a visual idea into property-value pairs and then verifying the result in a browser. Visual generators reverse that process. You manipulate the result directly and the tool writes the code, which eliminates the iteration loop between editor, browser, and developer tools entirely.
Build flexbox layouts with direction, justify, align, and wrap controls. Switch to CSS grid and set column count, row count, gap, and alignment. The live preview renders actual child elements so you see exactly how items distribute.
Set margin and padding with a live box model diagram that shows the orange margin layer, blue padding layer, and green content area updating in real time. Link all sides or unlock individual sides for asymmetric spacing.
Control font size, weight (all nine steps from 100 to 900), line height, letter spacing, text transform, text align, font family, and text color. Every change reflects immediately in the preview panel.
Set border width, style, and color. Control border radius with linked corners for uniform rounding or independent per-corner sliders for pill shapes and asymmetric designs. A corner visualizer shows the shape as you adjust.
Adjust horizontal offset, vertical offset, blur, spread, opacity, and color with sliders. The opacity control generates correct hex alpha values automatically. Enable or disable the shadow entirely without losing your settings.
Export a complete CSS class with your custom class name containing all generated properties. Switch to the Tailwind tab for approximate utility class equivalents using arbitrary value syntax for exact color and size matching.
Switch between tabs, adjust controls, watch the preview update instantly, and copy the CSS class or Tailwind equivalents. The full process takes under three minutes.
Presetsclick to apply all settings
Live Preview
Flexbox
display: flex; flex-direction: row; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: 16px;
margin: 0px; padding: 16px;
font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: 0px; text-transform: none; font-family: sans-serif; color: #1e293b; text-align: left;
border-width: 1px; border-style: solid; border-color: #e2e8f0; border-radius: 8px;
box-shadow: 0px 4px 16px 0px #0000001a;
transition: all 200ms ease 0ms;
CSS — .my-element
css
.my-element {
/* Layout */
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
gap: 16px;
/* Spacing */
margin: 0px;
padding: 16px;
/* Typography */
font-size: 16px;
font-weight: 400;
line-height: 1.5;
letter-spacing: 0px;
text-transform: none;
font-family: sans-serif;
color: #1e293b;
text-align: left;
/* Border */
border-width: 1px;
border-style: solid;
border-color: #e2e8f0;
border-radius: 8px;
/* Shadow */
box-shadow: 0px 4px 16px 0px #0000001a;
/* Transition */
transition: all 200ms ease 0ms;
}Three groups of CSS properties cover every common frontend styling need.
No account required. 100% free.
Five steps from empty controls to a copied CSS class ready for your project.
Select from five tabs: Layout for flexbox or CSS grid, Spacing for margin and padding, Typography for font properties, Border for width and radius, and Shadow for box shadow.
Move sliders, change dropdowns, and pick colors. The live preview updates on every change with no lag. You see the exact output immediately without switching to a browser.
The right panel shows the generated CSS for each section separately. Review layout, spacing, typography, border, and shadow output independently to understand what each control produces.
Enter a class name in the CSS Class Name field. The full CSS export wraps all generated properties inside a class with that name, ready to paste into any stylesheet.
Click Copy on the Full CSS Class tab for the complete block. Switch to Tailwind Equivalents for the utility class string with arbitrary value syntax for exact color and spacing values.
Many CSS generators produce a single property in isolation. Here is what makes this one more useful for real projects.
Every control change updates the preview in under 100 milliseconds. You see the result before deciding to keep a setting, which removes the constant cycle of saving, refreshing, and inspecting in developer tools.
The right panel shows layout, spacing, typography, border, and shadow CSS separately instead of one large block. This makes it easy to copy only the section you need rather than editing a combined output.
If you know the CSS property you need but not the Tailwind class name, configure it in the CSS tab and switch to Tailwind output. The tool maps every setting to the correct utility class faster than searching documentation.
The spacing tab shows a live box model diagram with the margin, padding, and content layers colour-coded and updating as you move sliders. This makes margin and padding behaviour immediately visible rather than abstract.
Most flexbox confusion comes from the axis swap when flex-direction changes. The live preview with real child elements shows justify-content and align-items behaviour instantly for any direction setting.
The border tab shows a live shape visualizer that updates as you move each corner radius slider. Linked mode rounds all corners uniformly. Unlocked mode lets you create pill shapes, squircles, or any asymmetric radius.
Most online CSS generators handle one property at a time. You use a box shadow generator, then a separate border radius tool, then write flexbox from memory. This tool combines all five property groups in a single interface with a shared live preview, so you can see the combined effect of all your settings simultaneously rather than mentally composing them from separate outputs.
Flexbox controls one-dimensional layout. Here are the four properties that matter most and the common mistakes that cause confusion.
flex-directionrow, row-reverse, column, column-reverseSets the main axis along which flex items are placed. Row is horizontal (default). Column is vertical. Reverse variants flow items in the opposite direction.
Common mistake
When you switch from row to column, the axes swap. justify-content then controls vertical alignment and align-items controls horizontal alignment. This trips up most developers until they see it visually.
justify-contentflex-start, flex-end, center, space-between, space-around, space-evenlyAligns items along the main axis. space-between places equal space between items with none at the edges. space-around places equal space around each item, giving half as much at the edges. space-evenly gives equal space everywhere including the edges.
Common mistake
space-between and space-around look similar with two items. The difference becomes clear with three or more items or when there is extra space.
align-itemsflex-start, flex-end, center, stretch, baselineAligns items along the cross axis (perpendicular to flex-direction). stretch is the default and makes all items fill the container height in a row layout. baseline aligns items by their text baseline rather than their box.
Common mistake
stretch only works when items do not have an explicit height set. Setting height: 100px on a flex child overrides stretch.
flex-wrapnowrap, wrap, wrap-reverseControls whether items that overflow the flex container wrap to the next line. nowrap (default) keeps everything on one line and may cause overflow. wrap creates a new row when items run out of space.
Common mistake
flex-wrap: wrap combined with align-content (not align-items) controls how wrapped rows distribute within the container. align-items only controls single-row alignment.
CSS Grid controls two-dimensional layout. These are the properties the generator uses and the gotchas that trip up even experienced developers.
grid-template-columnsrepeat(3, 1fr), 200px 1fr 2fr, auto 1frDefines the column track sizes. repeat(3, 1fr) creates three equal columns. Values can mix fixed pixels, flexible fr units, auto-sizing, and minmax() for responsive tracks.
Common mistake
fr units distribute remaining space after fixed-size tracks are placed. If you have 300px and 1fr columns in a 500px container, the 1fr column gets 200px, not 50%.
grid-template-rowsauto, repeat(2, 150px), minmax(100px, auto)Defines the row track sizes. auto rows size to their content. Fixed pixel rows create a predictable grid structure useful for layout templates where row heights need to be controlled.
Common mistake
Implicit rows (rows created automatically when grid items overflow defined rows) follow grid-auto-rows, not grid-template-rows. Always set grid-auto-rows when your grid might have more rows than you defined.
gap16px, 1rem, 16px 24px (row column)Sets the space between grid cells. A single value applies to both rows and columns. Two values set row gap and column gap independently. gap replaced grid-gap in the CSS spec and works in all modern browsers.
Common mistake
gap only creates space between cells, not between cells and the container edge. Use padding on the container for edge spacing.
align-items vs justify-itemsstart, end, center, stretchalign-items controls vertical alignment of items within their grid cells. justify-items controls horizontal alignment. Both default to stretch, which fills the entire cell area. Use center for equal space around items within cells.
Common mistake
align-content and justify-content control the entire grid within the container when the grid is smaller than the container. align-items and justify-items control items within their cells. These are different properties with different effects.
The box-shadow property takes five values in a specific order. Understanding what each part controls makes it easy to craft exactly the shadow effect you want without trial and error.
4px = 4px to the right
Horizontal distance from the element. Positive values move the shadow right. Negative values move it left. Zero centers it horizontally.
4px = 4px below
Vertical distance. Positive values move the shadow down (the most common direction, simulating light from above). Negative values create an upward shadow.
16px = soft, diffuse shadow
Controls how soft or sharp the shadow edge is. Zero creates a hard shadow with no blur. Larger values spread the shadow and soften it. Blur radius cannot be negative.
0px = matches element size
Expands or contracts the shadow before blurring. Positive values make the shadow larger than the element. Negative values shrink it. Useful for fine-tuning how far the shadow extends.
#00000019 = 10% black
The shadow color including alpha channel transparency. rgba(0, 0, 0, 0.1) creates a 10% opacity black shadow. The generator converts the opacity slider to hex alpha automatically.
box-shadow: [offset-x] [offset-y] [blur] [spread] [color];
box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.1);Set font-size in px or rem for scalability. Set line-height as a unitless number like 1.5 rather than 1.5em so it scales proportionally when font-size changes. Line heights between 1.4 and 1.6 work for body text. Headings typically use 1.1 to 1.2.
font-weight only renders correctly if the font includes that weight. Variable fonts and Google Fonts support all nine steps from 100 to 900. System fonts typically only render 400 and 700. Requesting weight 500 on a system font falls back to 400.
Negative letter-spacing on large headings, typically between negative 0.5px and negative 2px, creates a tighter, more professional appearance. Positive values on uppercase labels, between 0.5px and 2px, improve legibility. Never apply wide letter-spacing to lowercase body text.
Use text-transform: uppercase in CSS rather than typing in uppercase in HTML. CSS transformation is reversible, HTML capitalisation is permanent, and screen readers pronounce CSS-transformed text correctly as lowercase words rather than as spelled abbreviations.
The CSS Generator's Tailwind output tab handles this conversion automatically. Here is the mapping for the most common properties as a quick reference.
CSS Property
Tailwind Utility
display: flexflexflex-direction: columnflex-coljustify-content: space-betweenjustify-betweenalign-items: centeritems-centergap: 16pxgap-4 (or gap-[16px])display: gridgridgrid-template-columns: repeat(3,1fr)grid-cols-3padding: 16pxp-4 (or p-[16px])margin: 8px 16pxmy-2 mx-4border-radius: 8pxrounded-lg (or rounded-[8px])box-shadow: 0 4px 16px 0 #00000019shadow-[0_4px_16px_0_#00000019]font-size: 18pxtext-[18px] or text-lgTailwind v3 supports arbitrary values in square brackets for any value not in the default scale. This means you can always use the exact pixel value with syntax like p-[18px] or shadow-[0_4px_16px_0_#00000019] without adding custom configuration.
CSS decisions come up at every stage of frontend development. Here is who gets the most value from a visual generator.
Generate syntactically correct CSS for layout, spacing, and decoration without looking up property names and values. Use the Tailwind tab to discover utility class names for settings you already know in CSS.
The interactive relationship between controls and output makes CSS properties tangible. Move the justify-content slider and watch how items distribute. This builds intuition faster than reading documentation.
Translate Figma spacing values, shadow styles, and border radius settings directly into CSS without knowing the property syntax. Enter exact values from the design spec and copy the output.
Configure a CSS property visually then switch to the Tailwind output tab to discover which utility class produces that result. Faster than searching the documentation every time you need an arbitrary value.
Build the CSS for a new component in under three minutes before writing any HTML. The shared live preview shows all five property groups applied simultaneously so you can evaluate the complete visual result before coding.
Uitly offers 23 free browser-based tools for frontend developers and designers. These tools integrate with the CSS generator to build a complete visual design system.
Common questions about CSS flexbox, grid, box shadow, border radius, and how the generator works.
Apply display: flex to a parent container. Use flex-direction to set row or column layout. Control alignment with justify-content on the main axis and align-items on the cross axis. Use gap to add space between child elements. The Uitly CSS Generator lets you set all these properties visually and copies the complete CSS block in one click.
Flexbox is one-dimensional. It handles layout in a single row or column and lets items wrap to new lines. CSS Grid is two-dimensional. It controls rows and columns simultaneously and lets you place items in specific grid cells. Use flexbox for navigation bars, button groups, and single-axis alignment. Use grid for full page layouts, card grids, and any layout where rows and columns need to align with each other.
The CSS box-shadow property takes horizontal offset, vertical offset, blur radius, spread radius, and color values in that order. Use the Uitly CSS Generator's Shadow tab to control each value visually. The opacity slider generates the correct hex alpha value automatically. Copy the generated box-shadow declaration and paste it into your CSS.
Yes. The Uitly CSS Generator outputs both standard CSS and approximate Tailwind utility class equivalents for all generated properties. Switch to the Tailwind Equivalents tab after configuring your properties to get the className string with arbitrary value syntax for exact values not in Tailwind's default scale.
The CSS border-radius shorthand applies the same radius to all four corners. To set different values per corner, use border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius individually. The Uitly CSS Generator's Border tab lets you unlock corners and set each one independently with a slider, with a live corner visualizer showing the result.
Yes. The Uitly CSS Generator is completely free with no account, no signup, and no usage limits. The tool runs entirely in your browser, so no data is sent to a server.