CSS visuell erzeugen
Vier Stücke CSS, die jeder durch Ausprobieren schreibt — nur findet das Ausprobieren hier an Reglern statt und nicht in deinem Stylesheet.
- Läuft vollständig in deinem Browser
- Funktioniert offline
- Kein Upload
- Keine Anmeldung
- Kein Wasserzeichen
Werkzeug wird geladen…
So funktioniert es
- Wähl den Bereich: Verlauf, Schatten, Ecken oder fließende Größe.
- Zieh die Regler, bis die Vorschau stimmt.
- Kopier die CSS-Zeile heraus.
Warum nichts hochgeladen wird
Alles, was auf dieser Seite passiert, erledigt Code, der im Tab deines Browsers läuft — mit derselben Engine, die auch Webseiten darstellt. Die Datei wird von der Festplatte in den Speicher des Tabs gelesen, dort umgewandelt und als Download wieder herausgeschrieben. Sie wird nirgendwohin geschickt — weder zu uns noch zu Dritten.
Prüf es selbst nach
- Öffne die Entwicklerwerkzeuge deines Browsers (F12) und wähle den Tab „Netzwerk“.
- Lade deine Datei und starte das Werkzeug.
- Die einzigen Anfragen, die du siehst, holen den Code des Werkzeugs selbst — und bei ein paar schweren Werkzeugen dessen Open-Source-Engine von einem öffentlichen CDN — dazu ein kleines Seitenaufruf-Signal an loreatec.jp (Adresse und Titel der Seite, mehr nicht). Keine davon trägt deine Datei.
Häufige Fragen
Was rechnet der clamp()-Bereich eigentlich aus?
Die lineare Steigung. Du sagst „16px bei 360px Viewport, 32px bei 1280px“, und heraus kommt clamp(16px, 8.3px + 2.17vw, 32px) — der Wert wächst gleichmäßig zwischen deinen beiden Breiten und bleibt an beiden Enden stehen. Die Formel ist einfach, und niemand behält sie im Kopf; das ist das ganze Werkzeug.
Warum sehen die Schatten-Vorlagen besser aus als meine von Hand geschriebenen?
Weil realistische Schatten weniger deckend sind, weicher auslaufen und eine leicht negative Streuung (spread) haben, als die Intuition nahelegt. Die Vorlagen halten diese Verhältnisse fest; nimm eine davon als Ausgangspunkt statt 0 0 5px black.
Kann ich die ungleichmäßigen, organischen Eckformen bauen?
Setz den Haken für einzelne Ecken und stell die vier Radien getrennt ein — große gegenüberliegende Ecken ergeben die Blatt- oder Tropfenform. Für vollständig organische Formen brauchst du die Radius-Schreibweise mit zwei Werten, und die liegt außerhalb dieses Bereichs; was hier ist, deckt die Formen ab, die tatsächlich veröffentlicht werden.
Wird irgendetwas irgendwohin geschickt?
Nein. Die Vorschau ist ein div, auf das deine Stile angewendet werden — lokaler kann ein Werkzeug gar nicht arbeiten.