Skip to main content
🎨

Design-Tools-Tools

CSS-Generatoren, Farb-Tools und SVG-Erstellung

26 Tools
🎨

Farbcode-Konverter

Konvertieren Sie zwischen HEX-, RGB- und HSL-Farbcodes. Verwenden Sie die Farbauswahl und Echtzeit-Vorschau für intuitive Farbwahl.

🎨

Farbwähler

Wählen Sie Farben intuitiv mit einem Farbrad und Schiebereglern. Farbcodes in HEX, RGB und HSL kopieren.

🎨

Bild-Farbextraktor

Dominante Farben aus einem Bild automatisch erkennen und eine Farbpalette erzeugen. Sie können auch auf eine beliebige Stelle im Bild klicken, um einzelne Farben aufzunehmen.

🎯

Bild-Durchschnittsfarbe-Picker

Berechnen Sie die Durchschnittsfarbe eines gesamten Bildes oder eines ausgewählten Bereichs. Nützlich für Farbschemata oder Thumbnail-Hintergrundfarben.

🌈

CSS Farbverlauf-Generator

Erstellen Sie CSS-Farbverläufe visuell mit Ziehsteuerung. Unterstützt lineare, radiale und konische Farbverläufe mit Vorlagen.

🔲

CSS Box-Shadow-Generator

Erstellen Sie CSS box-shadow visuell mit Schiebereglern. Unterstützt mehrere Schatten und Inset-Schatten.

CSS Border-Radius-Generator

CSS border-radius mit individueller Eckensteuerung generieren. Mit elliptischen Radius-Optionen und beliebten Formvorlagen.

CSS Text-Shadow-Generator

CSS text-shadow mit Live-Vorschau generieren. Mehrere Schatten mit Neon-, Prägung- und anderen Vorlagen stapeln.

🔺

CSS Dreieck-Generator

Erzeugen Sie CSS-Dreiecke mit der border-Eigenschaft. Unterstützt alle 8 Richtungen mit anpassbarer Größe und Farbe.

✂️

CSS Clip-Path-Generator

Erstellen Sie CSS clip-path-Formen visuell per Drag-and-Drop. Mit Polygon, Kreis, Ellipse und Vorlagen wie Stern und Herz.

🪟

CSS Glassmorphism-Generator

Erstellen Sie Milchglas-UI-Effekte mit Live-Vorschau und CSS-Ausgabe. Transparenz, Unschärfe, Rahmen und Schatten fein einstellen.

CSS Ladeanimation-Generator

Wählen Sie aus mehreren CSS-Ladeanimationen und erhalten Sie den Code. Farbe, Größe und Geschwindigkeit für Spinner, Punkte, Balken und mehr anpassen.

📐

CSS Flexbox-Generator

Erstellen Sie Flexbox-Layouts visuell und generieren Sie CSS-Code. Alle Eigenschaften mit integriertem Spickzettel anpassen.

📈

CSS Cubic-Bezier-Generator

Erstellen Sie CSS-Animations-Beschleunigungskurven visuell. Griffpunkte ziehen und Animationen in Echtzeit ansehen.

🎨

Farbabstufungs-Generator

Erzeugen Sie helle bis dunkle Farbvariationen jeder Farbe. Anzahl der Stufen anpassen und als Tailwind CSS-Palette exportieren.

🎨

Farbmischer

Mischen Sie zwei oder mehr Farben in bestimmten Verhältnissen, um neue Farben zu erstellen. Vergleichen Sie Ergebnisse in verschiedenen Farbräumen wie RGB, HSL und LAB.

🎨

Farbpaletten-Generator

Erstellen Sie Farbpaletten aus einer Grundfarbe basierend auf der Farbtheorie. Enthält Komplementär-, Analog-, Triadisch- und weitere Farbschemata.

🔤

Web-Schriftarten-Vorschau

Vorschau von Web-Schriftarten aus Google Fonts in Echtzeit. Vergleichen Sie mehrere Schriftarten bei Anpassung von Größe und Farbe.

🎨

HTML-Farbnamen-Referenz

Alle 148 HTML/CSS-benannten Farben auf einen Blick durchsuchen. Suchen, Vorschau anzeigen und HEX-Codes einfach kopieren.

🔲

CSS-Hintergrundmuster-Generator

Hintergrundmuster mit reinem CSS erzeugen. Streifen, Punkte, Karos und mehr mit einem visuellen Editor anpassen.

📜

CSS-Scrollleisten-Generator

CSS-Scrollleisten-Design mit einem visuellen Editor anpassen. Farbe, Breite, Eckenradius anpassen und den Code direkt kopieren.

🌈

CSS-Farbverlauf-Text-Generator

CSS-Code zum Anwenden von Farbverläufen auf Text erzeugen. Farben, Richtung und Bereichsanpassungen in Echtzeit in der Vorschau anzeigen.

☑️

CSS-Checkbox-Generator

Benutzerdefinierte CSS-Checkboxen mit einem visuellen Editor erstellen. Animationen, Farben und Formen frei anpassen.

🔘

CSS-Kippschalter-Generator

Benutzerdefinierte CSS-Kippschalter mit einem visuellen Editor erstellen. Größe, Farbe und Animation anpassen und den Code exportieren.

🫧

SVG-Blob-Generator

Organische Blob-förmige SVGs automatisch erzeugen. Zufälligkeit und Komplexität für Webdesign-Dekorationen anpassen.

🔷

SVG-Muster-Generator

Wiederholbare SVG-Kachelmuster erzeugen. Mustertyp, Farbe und Größe anpassen und den Code exportieren.