CSS Tools & Rekenmachines

gradient CSS Kleurverloop Generator Ontwerp lineaire, radiale en conische CSS-kleurverlopen met live voorbeeld en kopieer de code. Genererenchevron_right layers CSS Box Shadow Generator Ontwerp een box-shadow visueel — verschuiving, vervaging, spreiding, kleur, dekking en inset — met live preview. Genererenchevron_right rounded_corner CSS Border-Radius Generator Rond elke hoek afzonderlijk of allemaal tegelijk af, in px of %, met live voorbeeld en kopieerbare CSS. Genererenchevron_right text_format CSS Tekstschaduw Generator Ontwerp een text-shadow met verschuiving, vervaging, kleur en dekking — live voorbeeld op voorbeeldtekst. Genererenchevron_right border_style CSS Rand Generator Ontwerp een rand visueel — breedte, stijl (solid, dashed, dotted, double…), kleur en radius — met live preview. Genererenchevron_right blur_on CSS-glassmorphism-generator Ontwerp een glaseffect (glassmorphism) met live voorvertoning — pas vervaging, transparantie, tint en rand aan, en kopieer de CSS. Genererenchevron_right swap_vert CSS Scrollbar Generator Ontwerp een aangepaste gekleurde scrollbar met live voorbeeld en kopieer de CSS — compatibel met WebKit en Firefox. Genererenchevron_right transform CSS Transformatie Generator Combineer rotate, scale, translate en skew visueel en kopieer de resulterende transform-CSS. Genererenchevron_right speed CSS Overgang Generator Bouw een transition — eigenschap, duur, timingfunctie en vertraging — en test deze live met één klik. Genererenchevron_right photo_filter CSS Filter-generator Combineer blur, brightness, contrast, grayscale, hue-rotate, saturate, sepia en invert met live voorbeeld. Genererenchevron_right animation CSS Animatie Generator Kies een keyframe-preset — draaien, pulseren, stuiteren, schudden, vervagen, schuiven — pas duur en herhalingen aan, kopieer @keyframes + klasse. Genererenchevron_right view_column CSS Flexbox-speeltuin Stel flex-direction, justify-content, align-items, wrap en gap live af op vakken en kopieer daarna de container-CSS. Uitvoerenchevron_right mouse CSS Cursor Kiezer Beweeg over elke CSS-cursorwaarde om deze live te testen, klik om de cursor-declaratie te kopiëren. Uitvoerenchevron_right view_week CSS Meerkolommengenerator Laat tekst in krantenstijl-kolommen vloeien — aantal, tussenruimte en scheidingslijn — met live voorbeeld en CSS. Genererenchevron_right format_size Typografische Schaal Generator Bouw een modulaire typografische schaal op basis van een basisgrootte en verhouding — live voorbeeld, px/rem-tabel en kant-en-klare CSS-variabelen. Genererenchevron_right text_fields Vloeiende typografie-calculator — CSS clamp() Genereert een CSS clamp() die de lettergrootte vloeiend laat meeschalen tussen twee viewportbreedtes — geen breakpoints nodig. Berekenenchevron_right view_column Grid-kolomcalculator Kolombreedtes voor elke container, kolomaantal en gutter — met kopieerklare CSS-grid-code en meerkoloms span-afmetingen. Berekenenchevron_right