Webdesign-Tools online
Webdesign-Tools online: CSS-Generatoren, Farbwerkzeuge, Kontrastprüfung, Bilder komprimieren und umwandeln, QR-Codes sowie Meta-Tags, robots.txt und Sitemaps.
Alle Werkzeuge: Web und Design
Farbumwandler
HEX, RGB, HSL, HSV, CMYK und OKLCH ineinander umrechnen, mit Farbwähler, Vorschau und Farbtönen.
ÖffnenFarbpalette aus Bild
Die wichtigsten 5 bis 10 Farben eines Bildes als HEX-Codes ermitteln, lokal im Browser.
ÖffnenKontrast prüfen (WCAG)
Kontrastverhältnis zweier Farben nach WCAG prüfen, AA und AAA, mit Vorschlag für passende Farbtöne.
ÖffnenCSS-Gradient-Generator
Linearen, radialen und konischen Farbverlauf zusammenstellen und den CSS-Code kopieren.
ÖffnenBox-Shadow-Generator
CSS-Schatten mit mehreren Ebenen, inset und Deckkraft einstellen, Vorschau sehen, Code kopieren.
ÖffnenFlexbox-Generator
Flexbox-Eigenschaften per Auswahl setzen, die Wirkung live sehen und das CSS kopieren.
ÖffnenCSS-Grid-Generator
Spalten, Zeilen und Abstände für CSS Grid festlegen, Vorschau prüfen und CSS kopieren.
ÖffnenFavicon-Generator
Favicon aus Bild oder Buchstabe erstellen: PNG in allen Größen, favicon.ico, HTML-Code und ZIP.
ÖffnenOpen-Graph-Generator
OG-Tags und Twitter Card für Links in sozialen Netzwerken erzeugen, mit Vorschau und Prüfung.
Öffnenrobots.txt-Generator
robots.txt mit User-agent-Regeln, Disallow, Allow und Sitemap erstellen und Pfade direkt testen.
ÖffnenSitemap-Generator
URL-Liste in eine gültige sitemap.xml umwandeln, mit lastmod, changefreq, priority und Prüfung.
Öffnenhtaccess-Redirect-Generator
301-Weiterleitungen für Apache: HTTPS erzwingen, www, Domainumzug und einzelne Pfade per RewriteRule.
Öffnenpx in rem umrechnen
Pixel in rem und rem in px umrechnen, mit eigener Basisgröße, Tabelle und Umwandlung ganzer CSS-Dateien.
ÖffnenSVG optimieren
SVG verkleinern: Kommentare, Metadaten und Editor-Attribute entfernen, Zahlen runden, Vorher-nachher.
ÖffnenQR-Code-Generator
QR-Code für Text oder URL erstellen, mit Fehlerkorrektur, Größe und Farben, als SVG und PNG.
ÖffnenBarcode-Generator
Barcodes erstellen: EAN-13, EAN-8 und Code 128 mit Prüfziffer, als SVG und PNG zum Herunterladen.
ÖffnenMeta-Tags-Generator
Title, Meta Description, Robots, Canonical und Viewport erzeugen, mit Längenprüfung in Zeichen und Pixeln.
ÖffnenSchema-Markup-Generator
JSON-LD für Organization, LocalBusiness, Article, FAQPage, Product, BreadcrumbList und Event erstellen.
Öffnenhreflang-Generator
hreflang-Tags für mehrsprachige Websites als HTML, HTTP-Header oder Sitemap erzeugen und Sprachcodes prüfen.
ÖffnenCSS formatieren
Minimiertes oder unordentliches CSS lesbar machen: Einrückung, eine Eigenschaft je Zeile, Media Queries.
ÖffnenCSS-Animation-Generator
@keyframes-Animationen mit Vorlagen, Dauer, Verzögerung, Timing und Wiederholung erstellen, mit Vorschau.
ÖffnenBorder-Radius-Generator
Abgerundete Ecken einzeln oder gemeinsam einstellen, auch elliptisch, und den kürzesten CSS-Code kopieren.
ÖffnenText-Shadow-Generator
CSS-Textschatten mit mehreren Ebenen erstellen: weich, hart, Kontur, Neon und 3D, mit Live-Vorschau.
ÖffnenCSS-Filter-Generator
CSS-Filter wie blur, Graustufen, Sepia, Kontrast und hue-rotate an eigenem Bild ausprobieren und kopieren.
ÖffnenClip-Path-Generator
CSS-Formen mit clip-path erstellen: Polygon-Punkte ziehen, Vorlagen wie Dreieck und Stern, Kreis und inset.
ÖffnenCubic-Bezier-Generator
Easing-Kurven für CSS-Übergänge mit ziehbaren Punkten gestalten, Vorlagen nutzen und in Bewegung vergleichen.
ÖffnenCSS-Spezifität berechnen
Spezifität von CSS-Selektoren nach Selectors Level 4 berechnen und vergleichen, auch :is(), :not(), :where().
ÖffnenCache-Control-Generator
Cache-Control-Header mit max-age, no-store, immutable und stale-while-revalidate erzeugen und erklären lassen.
ÖffnenNginx-Config-Generator
nginx-Server-Block erzeugen: Domain, HTTPS-Weiterleitung, PHP, Reverse Proxy, gzip und Sicherheits-Header.
ÖffnenBild komprimieren
JPG und WebP verkleinern: Qualität wählen, Größe vorher und nachher sehen, mehrere Bilder auf einmal.
ÖffnenBildgröße ändern
Bild in Pixel oder Prozent skalieren, Seitenverhältnis beibehalten und als PNG, JPG oder WebP speichern.
ÖffnenBild zuschneiden
Bildausschnitt mit der Maus oder per Finger wählen, feste Verhältnisse wie 1:1, 4:3 oder 16:9, Download.
ÖffnenBild in WebP umwandeln
PNG und JPG in WebP konvertieren und WebP zurück in PNG oder JPG, mehrere Dateien, mit Größenvergleich.
ÖffnenSVG in PNG umwandeln
SVG-Datei oder SVG-Code in PNG, JPG oder WebP umwandeln, mit Skalierung bis 8-fach und eigenem Hintergrund.
ÖffnenPlatzhalterbild-Generator
Platzhalterbilder in beliebiger Größe mit Farbe und Text erstellen, als PNG, JPG, WebP, SVG oder Data-URI.
ÖffnenFarbenblindheit-Simulator
Bild oder Farben so sehen wie bei Protanopie, Deuteranopie, Tritanopie und Achromatopsie.
ÖffnenPixelfehler-Test
Monitor auf tote und hängende Pixel prüfen: Vollbild-Farbflächen in Schwarz, Weiß, Rot, Grün und Blau.
ÖffnenBildschirmauflösung anzeigen
Auflösung, Viewport-Größe, Pixeldichte, Farbtiefe und Farbschema Ihres Geräts auf einen Blick.
ÖffnenFarbharmonien
Farbpalette nach Farbkreis: komplementär, triadisch, analog, tetradisch und monochrom, mit HEX-Codes.
ÖffnenCSS-Farbnamen
Alle 148 benannten CSS-Farben mit HEX, RGB und HSL, durchsuchbar, sortierbar und mit Kopieren-Knopf.
ÖffnenSeitenverhältnis-Rechner
Seitenverhältnis wie 16:9 aus Breite und Höhe ermitteln oder die fehlende Seite berechnen.
ÖffnenHTML-Editor mit Live-Vorschau
HTML und CSS schreiben und das Ergebnis sofort in einer abgeschotteten Vorschau sehen.
ÖffnenWeb-Manifest-Generator
site.webmanifest für eine Progressive Web App erstellen: Name, Farben, Icons, Anzeigemodus.
ÖffnenMailto-Link-Generator
mailto-Link mit Empfänger, CC, BCC, Betreff und Text erzeugen, korrekt kodiert, auch zerlegen.
ÖffnenHTML-Tabellen-Generator
HTML-Tabelle im Editor füllen oder aus CSV einfügen, mit thead, caption und CSS als Code kopieren.
ÖffnenLinks extrahieren
Alle Links aus HTML oder Text auslesen: Liste, Duplikate, interne und externe Links, Linktexte.
ÖffnenWorum es hier geht
Die Webdesign-Tools in diesem Bereich helfen bei Gestaltung und Technik einer Website: CSS-Generatoren für Verläufe, Schatten, Flexbox, Grid, Animationen und Formen, Farbumwandler und Kontrastprüfung nach WCAG sowie Werkzeuge, um Bilder zu komprimieren, zuzuschneiden und in WebP umzuwandeln.
Für Technik und SEO gibt es Generatoren für Meta-Tags, Open Graph, Schema-Markup, hreflang, robots.txt, Sitemaps, .htaccess und nginx sowie QR-Codes, Barcodes und Favicons. Bilder werden nur lokal verarbeitet und nie hochgeladen.
Häufige Fragen
Werden meine Bilder hochgeladen?
Nein. Bilder werden im Browser per Canvas verarbeitet und als Download angeboten.
Welcher Kontrast ist barrierefrei?
Für normalen Text verlangen die WCAG mindestens 4,5:1, für großen Text 3:1. Der Kontrastprüfer zeigt beides an.
Kann ich den CSS-Code direkt verwenden?
Ja. Alle Generatoren liefern Code zum Kopieren, der in aktuellen Browsern ohne Präfixe funktioniert.