Die Kobold-
Werkstatt

Flinke Browser-Werkzeuge, die den Kreativen die wiederkehrenden Handgriffe abnehmen. Jeder Kobold löst eine Sache — richtig gut. Kein Login, kein Server: alles läuft lokal auf deinem Gerät.

// zehn Helfer im Dienst · mehr in Arbeit

Farbe & Optik

Farbkobold

Farben & Kontrast

Paletten bauen, Kontraste nach WCAG prüfen, OKLCH-Ramps erzeugen und Farben direkt aus Bildern ziehen. Export als CSS-Variablen, JSON oder Tailwind.

WCAG-MatrixOKLCH-RampsBild → PaletteFarbenblind-Check

öffnen →

Würfelkobold

Farbwelten

Harmonische Paletten würfeln — nach Stimmungsbegriffen aus einer Wolke (über 100) oder rein zufällig. Farben fixieren, den Rest neu würfeln, direkt in den Farbkobold schicken.

Begriffs-WolkeHarmonienFixierenOKLCH

öffnen →

Animationskobold

Bewegung & Easing

Bezier-Editor mit ziehbaren Griffen, Feder-Physik als linear()-Easing, Galerie mit 58+ Presets, 21 Mikro-Interaktionen zum Anfassen, Stagger-Labor und Keyframe-Spielwiese.

Easing-LaborFeder → linear()58+ PresetsStagger

öffnen →

Schattenkobold

Schatten & Verläufe

Realistische, geschichtete box-shadows über wenige Regler — plus ein Verlaufs-Generator mit OKLCH-Interpolation für saubere Übergänge. Live-Vorschau, CSS-Export.

Geschichtete SchattenVerläufeOKLCHCSS-Export

öffnen →

Radiuskobold

Ecken & Rahmen

Runde Ecken – gleich, pro Ecke oder als organische Blob-Form – plus Rahmen und Kontur-Ring. Dazu eine konsistente Radius-Skala als Tokens. Live-Vorschau, CSS-Export.

border-radiusBlob-FormenRahmen & RingRadius-Tokens

öffnen →

Zustandskobold

Hover, Fokus & Co.

Buttons und Eingabefelder mit allen Zuständen nebeneinander – Normal, Hover, Fokus, Aktiv, Fehler, Deaktiviert. Dazu eine Kontrastprüfung für Text und Fokusring und fertiges CSS.

:hover & :active:focus-visibleWCAG-KontrastCSS-Export

öffnen →

Typografie & Maß

AaAaAa

Typokobold

Schrift & Rhythmus

Modulare Typo-Skala mit echten Fonts, live vorschaubar. Fließende clamp()-Werte für responsive Größen, dazu passende Zeilenhöhen. Export als CSS und Tailwind.

Modulare Skalaclamp() fließendLive-FontsZeilenhöhen

öffnen →

Fließkobold

Fließende Werte

Fertige clamp()-Werte für responsive Größen — Einzelwerte für Schrift, Abstand und Breite sowie eine komplette Raum-Skala. Mit Live-Vorschau, die beim Fensterziehen mitfließt.

clamp()-RechnerRaum-SkalaLive-VorschauCSS-Export

öffnen →

Ausgabe & Vorschau

Kartenkobold

OG- & Social-Bilder

Share-Bilder für alle Kanäle: 8 Formate von Story bis YouTube, Hintergrundbild mit Farb-Overlay, Logo, Vorlagen und Set-Export mehrerer Größen auf einen Klick.

8 Formate + eigeneBild & OverlayLogoSet-Export

öffnen →