Design-Tools: Farbe, CSS-Effekte, Bilder

Farben wählen, CSS-Verläufe und Schatten bauen, Bilder konvertieren und zuschneiden - alles im Browser, kein Upload, keine Anmeldung.

Ein Hub für Design- und UI-Arbeit. Markenfarben wählen und auf WCAG-Kontrast prüfen, harmonische Paletten und Design-System-Tonleitern erzeugen, CSS-Verläufe / Box-Shadows / Clip-Paths / Filter / Glassmorphismus mit Live-Vorschau und kopierfertigen Deklarationen bauen, und Bilder durch Konvertierungs- / Resize- / Kompressions- / Crop- / Pipetten-Tools schicken, ohne sie je hochzuladen. Alles im Browser; die Dateien bleiben auf deinem Gerät.

Farbe

Farbkonverter (HEX, RGB, HSL)

Konvertiere Farben zwischen HEX, RGB, HSL und OKLCH.

Farbpaletten-Generator

Komplementäre, analoge, triadische, tetradische und monochrome Paletten aus jeder Basisfarbe erzeugen.

Farbton-Generator

10 Schattierungen und 10 Tönungen jeder Farbe erzeugen - als Hex-Liste oder CSS-Variablen.

Kontrast-Prüfer

WCAG-Kontrast-Prüfer mit Live-Verhältnis, AA/AAA-Badges und Beispieltext.

Farbpipette für Bilder

Bild ablegen, beliebigen Pixel anklicken, Hex/RGB/HSL erhalten - und nebenbei eine Farbpalette aufbauen.

CSS-Effekte

CSS-Gradient-Generator

Lineare und radiale CSS-Gradienten mit Live-Vorschau bauen.

CSS-Box-Shadow-Generator

Mehrere CSS-Schatten mit Voreinstellungen, Live-Vorschau und kopierfertiger Deklaration stapeln.

CSS-Filter-Generator

Live-CSS-Filter-Playground mit Slidern für Blur, Helligkeit, Kontrast, Sättigung, Sepia, Graustufen, Invert, Hue-Rotate und Deckkraft.

Glassmorphism-Generator

Milchglas in CSS mit Live-Vorschau - Hintergrundfarbe, Backdrop-Blur, Rand und Schatten über lebendigem Backdrop justieren.

Formen und Animation

CSS-Clip-Path-Generator

Polygon-Clip-Paths visuell bauen - Dreieck, Sechseck, Stern, Sprechblase - mit Live-Vorschau und kopierfertigem CSS.

Border-Radius-Generator

Asymmetrischer Border-Radius mit 8 Eckwerten, Live-Vorschau und Form-Presets (Pille, Blob, Blatt, Ticket).

Cubic-Bezier-Generator

Visueller Cubic-Bezier-Editor mit animierter Vorschau und 12 Standard-Easing-Presets.

Bildbearbeitung

Bildkonverter

PNG, JPG, WebP und AVIF im Browser konvertieren - kein Upload, keine Anmeldung.

Bildgrösse ändern

Bilder im Browser in Pixel oder Prozent skalieren - kein Upload.

Bildkompressor

JPG- und WebP-Dateigrösse mit Qualitäts-Slider und Vorher/Nachher-Vorschau verkleinern.

Bild-Zuschneider

Bilder durch Ziehen einer Auswahl zuschneiden - frei oder mit festen Seitenverhältnissen (1:1, 4:3, 16:9, 9:16).

Bild zu Base64

Bild als Data URI (Base64) konvertieren - mit kopierbaren CSS- und HTML-Snippets. Oder Data URI einfügen für Vorschau.

Sonstiges

Favicon-Generator

Quadratisches Bild ablegen, PNG-Favicons in allen Standardgrössen herunterladen.

Kostenlose Design-Tools: Farbpipetten, CSS-Generatoren und Bild-Utilities

Die meisten Design-Werkzeuge sind entweder schwergewichtige Desktop-Apps oder hochspezialisierte Websites. Dieser Hub bündelt die kleinen Alltagswerkzeuge, zu denen Web- oder Produktdesigner greifen: Farb-Konverter für Hex / RGB / HSL, Paletten-Generator mit den fünf klassischen Harmonien aus einer Basis-Hex, Design-System-Ton-Rampe (50-950 wie Tailwind), WCAG-Kontrast-Prüfer mit AA- / AAA-Badges, Pipette, die Farben aus jedem hochgeladenen Bild zieht, CSS-Verlaufseditor mit Multi-Stops, Box-Shadow-Stapel mit Material-Elevation-Presets, Clip-Path-Editor mit zwölf Polygon-Presets, asymmetrischer Border-Radius-Generator, Cubic-Bezier-Easing-Editor, CSS-Filter-Playground (Blur / Helligkeit / Kontrast / Sättigung / Hue-Rotate) und Glassmorphismus-Generator mit Vorschau über buntem Backdrop.

Auf der Bildseite fünf clientseitige Tools: Format-Konverter (PNG / JPG / WebP / AVIF), Resizer mit Aspect-Ratio-Lock, qualitätsbasierter Kompressor mit Vorher/Nachher-Vorschau, Base64- / Data-URI-Encoder für Inline-Nutzung in HTML und CSS und Drag-Rechteck-Cropper mit gängigen Aspect-Ratio-Presets. Jedes Tool läuft über das Canvas-API des Browsers; Bilder verlassen das Gerät nicht, was Arbeitssitzungen privat hält und Upload-Zeit auf langsamen Verbindungen spart.

Alle Tools sind kostenlos, ohne Anmeldung, mit lokalisierten Texten in Englisch, Französisch, Spanisch, Deutsch und Portugiesisch. Seiten laden in Millisekunden und wiegen weit unter 250 KB JavaScript - leicht genug, um sie auf einem Laptop mit Smartphone-Tethering oder hinter einem Firmenproxy zu nutzen, der Uploads drosselt.