CSS Flexbox Layout Designer

Align boxes and containers using visual flexbox controls.

Horizontal Offset (10px)

Vertical Offset (10px)

Blur Radius (20px)

Spread Radius (0px)

Inset Shadow

CSS Output

box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.2);

Processed locally in your browser — nothing is uploaded.

How to Use

Flexbox (Flexible Box Layout) is a one-dimensional layout model for aligning items in columns or rows.

CSS Grid Generator

Design CSS Grid rows and columns visually.

CSS Border Radius Generator

Design custom border radius corners for CSS layout blocks.