Gratis CSS- en designtools
Bouw CSS visueel op met realtime voorbeelden. Kleurpaletten, verlopen, schaduwen, randstralen, flexbox-layouts, versnellingscurven en responsieve maten: kopieer de CSS zodra het er goed uitziet.
8 tools in deze categorie · 100% gratis · Zonder registratie
Alle Ontwerp en CSS
Kleurconverter (HEX/RGB/HSL)
Zet kleuren om tussen de formaten HEX, RGB en HSL. Kies een kleur visueel of voer de waarden handmatig in.
Openen →CSS box-shadow-generator
Maak box-shadow-waarden in CSS op een visuele manier. Bekijk een realtime voorvertoning en kopieer de gegenereerde CSS.
Openen →CSS-verloopgenerator
Maak lineaire en radiale CSS-verlopen. Kies de kleuren op visuele wijze en kopieer de gegenereerde CSS.
Openen →Cubic-bezier-versnellingscurvegenerator
Maak cubic-bezier-versnellingscurves voor CSS. Inclusief standaard voorinstellingen.
Openen →Kleurpaletgenerator
Genereer harmonieuze kleurpaletten op basis van een willekeurige basiskleur. Ondersteunt complementaire, analoge, triadische en monochromatische schema's.
Openen →CSS border-radius-generator
Maak complexe border-radius-waarden in CSS op een visuele manier. Onafhankelijke controle over elke hoek.
Openen →CSS clamp()-generator
Genereer vloeiende, responsieve CSS-waarden met clamp(). Schaalt soepel tussen minimum- en maximumformaten over de viewportbereiken heen.
Openen →CSS-flexboxgenerator
Maak CSS-flexboxlay-outs op visuele wijze. Bekijk het resultaat in realtime terwijl u de richting, uitlijning, regelafbreking en tussenruimte aanpast.
Openen →Waarom visuele CSS-generatoren het designwerk versnellen
Moderne CSS geeft u volledige controle, maar de syntaxis van box-shadow, verloopovergangen en cubic-bezier-versnelling is vervelend om met de hand te schrijven. Met visuele generatoren kunt u schuifregelaars verslepen, het resultaat in realtime zien bijwerken en vervolgens de exacte CSS kopiëren. Ze vervangen geen CSS-kennis, maar ze nemen de wrijving weg bij het itereren op de waarden. Gebruik ze om te prototypen en breng de uitvoer daarna naar uw code.
Moderne CSS-functies die het waard zijn om te leren in 2025
clamp() voor vloeiende typografie (geen mediaquery's meer per breekpunt voor lettergroottes). aspect-ratio voor responsieve video- en afbeeldingscontainers. grid voor tweedimensionale layouts (gebruik flexbox voor eendimensionale). subgrid voor geneste rasters die uitlijnen met hun ouder. De selector :has() voor stijlen op basis van de ouder. color-mix() om kleuren tijdens runtime te mengen. Allemaal beschikbaar in elke moderne browser. De CSS clamp()-generator op deze pagina produceert correct gevormde clamp()-expressies op basis van uw min-/maxwaarden.
Kleurentheorie voor niet-designers
Monochrome paletten (één kleurtoon, verschillende lichtheid) zijn de veiligste professionele keuze. Analoge paletten (aangrenzende kleurtonen) stralen eenheid en rust uit. Complementaire paletten zorgen voor contrast, perfect voor call-to-actions. Triadische paletten zijn levendig maar moeilijk in evenwicht te brengen. De Kleurpaletgenerator berekent ze allemaal op basis van een door u gekozen basiskleur. Controleer voor toegankelijkheid ook de contrastverhoudingen: WCAG AA vereist 4,5:1 voor bodytekst en 3:1 voor grote tekst.