CSS Grid & Flexbox Generator

Configure a layout using CSS Flexbox or Grid, preview it with sample boxes, and copy the CSS code for your project.

Layout mode

Items

Direction

Wrap

Justify

Align items

CSS Code

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}
.item {
  padding: 12px;
  border-radius: 0.75rem;
  background: rgb(15 23 42);
  border: 1px solid rgb(30 64 175);
  color: rgb(226 232 240);
}

Layout Preview

Related tools

URL Encode / Decode

Percent-encode or decode URLs and query strings for web use.

HTTP Header Checker

Fetch and inspect HTTP response headers for a given URL.

URL Shortener (Demo)

Generate demo short URLs from long links on the front-end.

Color Picker & Palette Generator

Pick a base color and generate tints, shades, and accent colors. Copy HEX values for your UI and design work.

Gradient Generator

Create linear gradients with multiple color stops and angles. Preview and copy the CSS code.