CSS-grid- en flexboxgenerator

Schakel tussen Grid en Flexbox, pas het aantal kolommen en rijen of de richting en uitlijning van flex-items en de tussenruimte ertussen aan, met een live voorbeeld van gekleurde vakken binnen de container, en kopieer vervolgens de exacte CSS-code.

Design- en CSS-tools Werkt volledig in je browser

Alle verwerking gebeurt op je eigen apparaat — er wordt niets naar een server gestuurd.

Kolommen3Rijen2Tussenruimte (Gap)12px

CSS-code

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 12px;

Ga verder met

Volledig lokaal

CSS-clip-pathgenerator

Kies een kant-en-klare vorm (cirkel, driehoek, ster, spraakballon...) en kopieer de clip-path CSS-code.

Design- en CSS-toolsTool openen

Volledig lokaal

Cubic-bezier-easinggenerator

Sleep twee punten om visueel een aangepaste bewegingscurve te ontwerpen en kopieer de cubic-bezier code.

Design- en CSS-toolsTool openen

Volledig lokaal

CSS-glassmorphismgenerator

Ontwerp visueel een matglas-kaarteffect en kopieer de kant-en-klare CSS-code.

Design- en CSS-toolsTool openen

Gerelateerde tools

Volledig lokaal

Tekst naar Handschrift Converter

Zet getypte tekst om in een afbeelding die eruitziet als handschrift op gelinieerd papier, in een keuze van handschriftstijlen.

Design- en CSS-toolsTool openen

Volledig lokaal

SVG Blob & Achtergrondpatroon Generator

Genereer een willekeurige organische blob-vorm of een naadloos herhalend achtergrondpatroon als SVG, en kopieer of download het.

Design- en CSS-toolsTool openen

Volledig lokaal

CSS Keyframe Animatie Generator

Ontwerp visueel een CSS-animatie (fade, slide, zoom, bounce, rotate, flip) en krijg kant-en-klare @keyframes-code.

Design- en CSS-toolsTool openen

Volledig lokaal

Kleurenpalet Harmonie Generator

Kies een basiskleur en krijg een harmonieus kleurenpalet (complementair, analoog, triadisch, tetradisch, monochromatisch).

Design- en CSS-toolsTool openen

Volledig lokaal

Meshverloopgenerator

Creëer met één klik een zachte, meerpunts mesh-gradiëntachtergrond, en kopieer kant-en-klare CSS-code.

Design- en CSS-toolsTool openen

Wil je Uddatak proberen?

Blader door de volledige bibliotheek met tools en gebruik meteen wat je nodig hebt — gratis en zonder registratie.

Bekijk alle tools