Hello KeyboardMga tool
Code, data, at QR na tool

Dot Grid Generator

Ayusin ang density at hitsura ng dot grid, i-preview ito nang lokal, at kopyahin ang CSS background.

Lokal na pinoproseso sa browserHindi kailangan ng accountMga detalye ng pagkapribado ↗

Limitado sa 2–40 ang column at row, 1–8px ang tuldok, at 4–64px ang pagitan.

Paano gamitin

Paano gamitin

  1. Pumili ng column at row, laki ng tuldok, at pagitan sa loob ng limitasyon.
  2. Itakda ang kulay ng tuldok at background, at tingnan ang live preview.
  3. Kopyahin ang nabuong CSS sa stylesheet o component.

CSS-only na dot grid

Lokal na ginagawa ang pattern gamit ang radial-gradient. Hindi ito gumagawa ng maraming DOM grid o image file.

May hangganang controls

Ang column at row ay 2–40, tuldok ay 1–8px, at pagitan ay 4–64px.

Lokal at madaling kopyahin

Sa browser lang pinoproseso ang kulay, preview, at CSS output.

Mga madalas itanong

Maaari mo ring alamin

Gumagawa ba ito ng image?

Hindi. CSS background gamit ang radial-gradient ang ginagawa nito.

Ano ang epekto ng column at row?

Tinutukoy nito ang density kasama ng napiling pagitan at laki ng tuldok.

Ina-upload ba ang mga kulay?

Hindi. Lokal sa browser ang preview at CSS generation.

Iba pang tool na subukan

I-browse lahat ↗
Code, data, at QR na tool

Tagabuo ng CSS Grid

Bumuo ng CSS grid na may pantay na mga hanay o awtomatikong umaangkop na auto-fit. Ayusin ang hulma ng mga hilera, pagkakahanay, agwat at 1–100 selula. Kopyahin ang CSS o i-download ang katugmang HTML.

Code, data, at QR na tool

Stripe Pattern Maker

Gumawa ng paulit-ulit na CSS stripe pattern gamit ang sariling kulay, direksyon, lapad, pagitan, at anggulo.

Code, data, at QR na tool

Tagabuo ng unti-unting pagbabago ng kulay saCSS

Gumawa ng tuwid o pagbabago mula sa gitna ng kulay saCSS gamit ang dalawa hanggang anim na nakaayos na hangganan ng kulay, paunang tanaw at deklarasyon ng likuran na handang kopyahin.