Design
Löst jede Hex-Farbe zur nächstgelegenen benannten CSS-Farbe mit echter CIEDE2000-Distanz auf und zeigt die ganze Farbfamilie.
css-color-name-resolverDesign
Erzeugt das seit 2024 auf Dribbble/Behance populäre „Gradient-Mesh“: mehrere radiale Verläufe (Farbfleck → Ausblendung in transparent derselben Farbe) über einer Basiskolorit (optional eine konische Schicht), mit Mischmodi, SVG-Filmkorn, geseedeten Layouts (Ecken / Ring / Streuung / Raster), Live-Vorschau, kopierbarem CSS und Tailwind-Willkürklasse. Flecken blenden über 8-stelliges Hex #RRGGBB00 aus — ohne den grauen Ring des transparent-Schlüsselworts.
css-gradient-mesh-generatorDesign
Lade ein Master-Bild hoch und erhalte das komplette Kit: Instagram (1:1 / 4:5 / 3:4 fürs Grid / Story / Reel), X (Header 1500×500 / Feed), LinkedIn (persönliches Banner / Firmencover / Post-Bild), YouTube (Thumbnail / Kanalbanner) und Facebook-Link. Jeder Zuschnitt wird mit seiner 2025-2026 verifizierten Safe-Zone-Maske angezeigt (Story-Ränder, X-Avatar-Kreis, LinkedIn-Avatar-Zone, YouTube-Dauer-Badge) und alles geht als ZIP raus.
social-media-template-resize-gridDesign
Erzeugt den vollständigen Glassmorphism- oder Neumorphism-CSS-Snippet von Anfang bis Ende: Blur, Sättigung, Tönungsdeckkraft, Radius, Rahmen, Außenschatten und Oberkanten-Highlight; optional SVG-feTurbulence-Korn und @supports-Fallback; automatisch mit -webkit-backdrop-filter-Präfix (vor Safari 18 nötig) und Tailwind-Klassen-Mapping (mit v3/v4-Hinweis), plus Live-Vorschau der Karte auf Gradient-Hintergrund.
glassmorphism-css-snippet-builderDesign
Laden Sie ein Bild hoch und zeigen Sie eine Vorschau auf Instagram Feed/Story/Reels, TikTok, YouTube, X und LinkedIn — mit Safe-Zone-Overlays, die genau zeigen, welche Pixel beschnitten oder von der UI verdeckt werden, bevor Sie veröffentlichen.
social-media-caption-crop-previewDesign
Kuratierte 2026-Referenz der Bildabmessungen für Instagram, Facebook, X, LinkedIn, YouTube, TikTok, Pinterest und WeChat, filterbar nach Plattform.
social-media-image-size-cheatsheetDesign
Fügen Sie Tailwind-Klassen mit Arbitrary Values ein (w-[137px], text-[#bada55], grid-cols-[1fr_2fr], [mask-type:luminance]) und prüfen Sie das erzeugte CSS mit Live-Vorschau, Erkennung von Datentyp-Hinweisen und einer Erklärung jeder Übersetzung. Hilfreich zum Debuggen von calc(), CSS-Variablen und Werten außerhalb der Token-Skala.
tailwind-arbitrary-value-playgroundDesign
Berechnet eine CSS-Filterkette, die aus einer monochromen Basisfarbe eine Zielfarbe möglichst genau nachbildet
css-target-color-filter-generatorDesign
Visualisiert eine CSS-cubic-bezier-Easing-Kurve, zeigt Vorschau auf Position/Deckkraft/Skalierung, wählt Presets und exportiert CSS
css-easing-visualizerDesign
Gibt minimale und maximale Viewport- und Schriftgroessen ein und erzeugt clamp(), kopierbares CSS und Vorschaudaten
css-fluid-typography-clamp-calcDesign
Erstellt Rot-Cyan 3D-Anaglyph-Bilder aus normalen Fotos. Erstellt stereoskopische 3D-Bilder, die mit Rot-Cyan 3D-Brille betrachtet werden können.
image-anaglyphDesign
Erstellt Tiefenkarten aus Bildern unter Verwendung von Helligkeits-, Sättigungs- und Kantenanalyse. Erstellt Tiefenkarten in Graustufen, wobei hellere Pixel nähere Objekte und dunklere Pixel entferntere Objekte anzeigen.
image-depth-map