✏️ Editar elemento: 💡 Clic en el elemento del preview para seleccionarlo

Propiedades del H1

🔤 Tipografia ▼

font-family

font-size

36px

font-weight

font-style

text-align

text-decoration

text-transform

letter-spacing

0px

line-height

1.2

text-shadow

🎨 Color ▼

color (texto)

background-color

opacity

📦 Box Model ▼

padding

0px

margin

0px

width

height

box-sizing

display

🖂 Bordes y Sombras ▼

border-width

0px

border-color

border-style

border-radius

0px

box-shadow

📍 Posicionamiento ▼

position

top

left

z-index

overflow

🔀 Flexbox ▼

flex-direction (contenedor demo)

justify-content

align-items

flex-wrap

gap

8px

🔄 Transformaciones ▼

rotate

0deg

scale

translateX

0px

translateY

0px

transition-duration

0.3s

cursor

Vista Previa en Tiempo Real Clic en H1 o P para seleccionar

H1 P

Hola, Mundo!

Este es un parrafo de ejemplo. Modifica sus propiedades CSS usando los controles de la izquierda y observa como cambia en tiempo real. Experimenta y aprende con CSS!

🔀 Demo Flexbox Contenedor interactivo

Caja 1

Caja 2

Caja 3

Caja 4

Caja 5

display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; flex-wrap: nowrap; gap: 8px;

Codigo Generado

CSS

HTML

Completo