100% in de browser
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.
⬛
CSS Box Shadow Generator
Ontwerp een box-shadow visueel met live voorbeeld en kopieer de CSS.
⬭CSS Border Radius Generator
Pas elke hoekradius aan met een live voorbeeld en kopieer de CSS.
▤CSS Gradient Generator
Bouw een lineaire of radiale gradient met live voorbeeld en kopieer de CSS.
TCSS Text Shadow Generator
Ontwerp een text-shadow met een live voorbeeld en kopieer de CSS.
▲CSS Triangle Generator
Genereer een pure-CSS driehoek in elke richting en kopieer de CSS.
⬓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 Transform Generator
Combineer translate, rotate, scale en skew tot één CSS transform met live voorbeeld.
⌒CSS Easing Generator
Kies of bouw een cubic-bezier easing en speel die af op een geanimeerd voorbeeldstipje.
▢Glassmorphism Generator
Maak CSS voor matglazen kaarten met blur, transparantie, verzadiging en een tintkleur.
◇CSS clip-path-generator
Knip een element in veelgebruikte vormen en kopieer de clip-path CSS.
☼CSS-filtergenerator
Stel CSS-filters samen met schuifregelaars en een live voorbeeld, en kopieer.
⤿CSS-animatiegenerator
Bouw een keyframe-animatie, bekijk hem live en kopieer de CSS.
◜CSS-spinnergenerator
Genereer een pure-CSS laadspinner en kopieer de CSS.
▩CSS-achtergrondpatroon
Genereer een CSS-achtergrondpatroon met twee kleuren en kopieer het.
◳Neumorfisme-generator
Maak zachte soft-UI neumorfe schaduwen met een live voorbeeld en kopieer.
@CSS Media Query-bouwer
Bouw een responsieve @media-query met presets en kopieer hem.
▌CSS Schuifbalk Stylen
Style een aangepaste schuifbalk en kopieer de ::-webkit-scrollbar CSS.
▭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.
T○CSS Tekstomlijning
Voeg een omlijning of streek toe aan tekst en kopieer de CSS.