Gerador Visual CSS

Layout, espaçamento, bordas, fundo, sombra, tipografia, transformação e transição

Layout (Flexbox)

display

flex-direction

flex-wrap

justify-content

align-items

gap

16px

Tamanho & Espaçamento

width

100px

height

100px

padding

16px

margin

0px

Borda & Cantos

border-width

1px

border-style

border-color

Cantos iguais

border-radius

8px

Fundo

tipo

background-color

Sombra

offset-x

0px

offset-y

4px

blur

12px

spread

0px

cor

inset

Tipografia

font-size

16px

font-weight

color

text-align

text-transform

letter-spacing

0px

line-height

1.5

Transformação & Opacidade

opacity

100%

rotate

0°

scale

100%

skewX

0°

Transição

transition-property

duration

0.3s

timing-function

Preview

Código CSS Gerado

.elemento {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 16px;
  width: 100px;
  height: 100px;
  padding: 16px;
  margin: 0px;
  border: 1px solid #0f172a;
  border-radius: 8px;
  background-color: #ffffff;
  box-shadow: 0px 4px 12px 0px #00000040;
  font-size: 16px;
  font-weight: 400;
  color: #0f172a;
  text-align: left;
  letter-spacing: 0px;
  line-height: 1.5;
  transition: all 0.3s ease;
}