CSS-tools

Genereer visueel schone, kant-en-klare CSS met deze gratis tools — box-shadows, gradiënten, border-radius, flexbox, grid, animaties, clip-paths en filters — met een live voorbeeld terwijl je elke waarde aanpast.

Schaduwen, filters en afwerking

⬛

CSS Box Shadow Generator

Ontwerp een box-shadow visueel met live voorbeeld en kopieer de CSS.

CSS Text Shadow Generator

Ontwerp een text-shadow met een live voorbeeld en kopieer de CSS.

◳

Neumorfisme-generator

Maak zachte soft-UI neumorfe schaduwen met een live voorbeeld en kopieer.

▢

Glassmorphism Generator

Maak CSS voor matglazen kaarten met blur, transparantie, verzadiging en een tintkleur.

☼

CSS-filtergenerator

Stel CSS-filters samen met schuifregelaars en een live voorbeeld, en kopieer.

T○

CSS Tekstomlijning

Voeg een omlijning of streek toe aan tekst en kopieer de CSS.

▌

CSS Schuifbalk Stylen

Style een aangepaste schuifbalk en kopieer de ::-webkit-scrollbar CSS.

Vormen, verlopen en achtergronden

⬭

CSS Border Radius Generator

Pas elke hoekradius aan met een live voorbeeld en kopieer de CSS.

◇

CSS clip-path-generator

Knip een element in veelgebruikte vormen en kopieer de clip-path CSS.

▲

CSS Triangle Generator

Genereer een pure-CSS driehoek in elke richting en kopieer de CSS.

▤

CSS Gradient Generator

Bouw een lineaire of radiale gradient met live voorbeeld en kopieer de CSS.

▩

CSS-achtergrondpatroon

Genereer een CSS-achtergrondpatroon met twee kleuren en kopieer het.

Lay-out en responsief ontwerp

⬓

CSS Flexbox Speeltuin

Experimenteer met flexbox-eigenschappen in een live voorbeeld en kopieer de gegenereerde CSS.

▦

CSS Grid Generator

Genereer een CSS grid-lay-out met instelbare kolommen, rijen en gap, met live voorbeeld.

CSS Media Query-bouwer

Bouw een responsieve @media-query met presets en kopieer hem.

▭

CSS Beeldverhouding-box

Genereer een responsieve beeldverhouding-box met een padding-terugval.

‖

CSS Meerkoloms-indeling

Genereer een CSS-tekstindeling met meerdere kolommen en een scheidingslijn.

Beweging, transformaties en animatie

⤢

CSS Transform Generator

Combineer translate, rotate, scale en skew tot één CSS transform met live voorbeeld.

⤿

CSS-animatiegenerator

Bouw een keyframe-animatie, bekijk hem live en kopieer de CSS.

⌒

CSS Easing Generator

Kies of bouw een cubic-bezier easing en speel die af op een geanimeerd voorbeeldstipje.

◜

CSS-spinnergenerator

Genereer een pure-CSS laadspinner en kopieer de CSS.

Geen tools komen overeen.