CSS visueel genereren
Vier stukjes CSS die iedereen schrijft met vallen en opstaan, waarbij het vallen en opstaan nu op regelaars gebeurt in plaats van in je stylesheet.
- Draait volledig in je browser
- Werkt offline
- Geen upload
- Geen registratie
- Geen watermerk
De tool wordt geladen…
Hoe het werkt
- Kies het paneel: gradient, schaduw, hoeken of vloeiende maat.
- Sleep tot het voorbeeld er goed uitziet.
- Kopieer de CSS-regel.
Waarom er niets wordt geüpload
Alles wat deze pagina doet, doet code die in je browsertabblad draait, met dezelfde engine die ook webpagina’s tekent. Je bestand wordt van schijf naar het geheugen van dat tabblad gelezen, daar bewerkt en weer weggeschreven als download. Het wordt nergens naartoe gestuurd — niet naar ons, en niet naar een derde partij.
Controleer het zelf
- Open de ontwikkelaarstools van je browser (F12) en kies het tabblad Netwerk.
- Laad je bestand en start de tool.
- De enige verzoeken die je ziet, halen de code van de tool zelf op — en bij een paar zware tools hun opensource-engine van een openbare CDN — plus één kleine bezoekmelding aan loreatec.jp (adres en titel van de pagina, meer niet). In geen van die verzoeken zit jouw bestand.
Veelgestelde vragen
Wat berekent het clamp()-paneel nu eigenlijk?
De lineaire helling. Jij zegt “16px bij een viewport van 360px, 32px bij 1280px” en de tool geeft clamp(16px, 8.3px + 2.17vw, 32px) terug — de waarde schaalt vloeiend tussen je twee breedtes en stopt aan beide uiteinden. De formule is simpel en niemand onthoudt hem; dat is precies waar deze tool voor is.
Waarom ogen de kant-en-klare schaduwen beter dan mijn eigen schaduwen?
Omdat realistische schaduwen een lagere dekking, een grotere vervaging en een licht negatieve spreiding hebben dan je intuïtie ingeeft. De kant-en-klare stijlen leggen die verhoudingen vast; begin bij een daarvan en stel bij, in plaats van bij 0 0 5px black.
Kan ik ook de ongelijke, organische hoekvormen maken?
Vink de optie per hoek aan en stel de vier stralen apart in — grote tegenoverliggende hoeken geven de blaadje- of bloblook. Voor volledig organische blobs heb je de tweewaardige radius-syntax nodig, en dat gaat verder dan dit paneel; wat hier staat, dekt de vormen die mensen in de praktijk daadwerkelijk gebruiken.
Wordt er iets ergens heen gestuurd?
Nee. Het voorbeeld is een div met jouw stijlen erop toegepast — lokaler kan een tool niet zijn.