Design

Farbformate umwandeln

HEX-, RGB- und HSL-Farben mit Transparenz umrechnen, als Farbfeld ansehen und als CSS-Wert kopieren.

Farbkontrast prüfen

Textkontrast nach WCAG 2.2 prüfen, mit Vorschau und getrennten AA- und AAA-Ergebnissen für normale und große Schrift.

CSS-Farbverlauf erstellen

Lineare und radiale Verläufe mit zwei bis acht Farbstopps gestalten und das CSS direkt kopieren.

CSS-Schatten erstellen

Versatz, Unschärfe, Ausdehnung und Deckkraft eines Box-Schattens einstellen und fertiges CSS übernehmen.

Seitenverhältnis berechnen

Bild- und Videoverhältnisse kürzen und aus einer Zielbreite oder Zielhöhe die passende zweite Abmessung berechnen.

CSS-Grid-Generator

Feste oder automatisch angepasste Spalten, Abstände und Ausrichtung mit Live-Vorschau gestalten.

CSS-Flexbox-Generator

Richtung, Umbruch, Verteilung und Ausrichtung ausprobieren und passenden CSS- und HTML-Code erhalten.

Farbpalette erstellen

Aus einer Grundfarbe komplementäre, analoge, triadische oder monochrome Paletten als HEX, CSS und JSON erzeugen.

CSS-Ecken abrunden

Vier Ecken gemeinsam oder einzeln einstellen, elliptische Rundungen ansehen und border-radius als CSS exportieren.

CSS-clip-path für Polygone

Polygonpunkte ziehen oder ihre Koordinaten eingeben, den Ausschnitt direkt ansehen und passendes CSS exportieren.

CSS-cubic-bezier-Editor

Zwei Kontrollpunkte bearbeiten, den Übergang abspielen und eine cubic-bezier-Kurve für CSS erzeugen.

Fließende Schriftgröße mit CSS clamp()

Aus Schriftgrößen- und Viewport-Grenzen eine responsive clamp()-Deklaration in px oder rem berechnen.

CSS-Bildfilter erstellen

Unschärfe, Helligkeit, Farben und Deckkraft an einem Beispiel oder lokalen Bild ausprobieren und filter-CSS exportieren.

CSS-Transformationen in 2D und 3D

Verschiebung, Rotation, Skalierung, Scherung und Ursprung einstellen, bei Bedarf um Perspektive und 3D-Werte ergänzen.

Papierformate und Druckmaße in Pixeln

A-, ISO-B-, C- und nordamerikanische Formate in Millimeter, Zoll, Punkt und Pixel mit Ausrichtung und Beschnittzugabe umrechnen.

SVG optimieren und in PNG umwandeln

SVG bereinigen, Dateigröße und Darstellung vergleichen und als SVG oder PNG mit eigener Größe sowie transparentem oder einfarbigem Hintergrund speichern.