GRNERATOR CSS

📐 CSS All-in-One Generator

Box1

Box2

Box3

Radius: 10 | 10 | 10 | 10 px

Flexbox Aktif

Ukuran dan Dimensi (Diterapkan pada semua kotak)

Lebar (Width):

px % em rem

Tinggi (Height):

px

Catatan: Satuan tinggi disamakan dengan satuan lebar.

Styling Teks (Diterapkan pada semua kotak)

Ukuran Teks (Font-Size) [px]:

Warna Teks (Color):

Posisi Teks (Text-Align): Tengah (Center) Kiri Atas (Flex-Start) Kanan Bawah (Flex-End) Catatan: Posisi diatur menggunakan Flexbox pada kotak.

Styling Dasar Kotak (Box 1)

Warna Latar Belakang:

Ketebalan Border (px):

Warna Border:

Border Radius (Diterapkan pada semua kotak)

Kiri Atas (Top-Left) [px]:

Kanan Atas (Top-Right) [px]:

Kanan Bawah (Bottom-Right) [px]:

Kiri Bawah (Bottom-Left) [px]:

Box Shadow (Diterapkan pada semua kotak)

Offset Horizontal (px):

Offset Vertikal (px):

Radius Blur (px):

Radius Spread (px):

Warna Shadow:

Opacity Shadow (%):

Pengaturan Display & Layout

Properti Display: block (Positioning Aktif) flex (Flexbox Aktif)

Flexbox Container Properties

justify-content: flex-start flex-end center space-between space-around space-evenly

align-items: stretch flex-start flex-end center baseline

Positioning Properties (Hanya kotak pertama)

Properti Position (Hanya kotak pertama): static relative absolute fixed

Top (px) - Range: -100px hingga 100px:

Left (px) - Range: -100px hingga 100px:

Kode CSS yang Dihasilkan

Kode HTML yang Direkomendasikan