HTML-Tools
Arbeite mit HTML, Pug, JSX, SVG-Komponenten und CSS. Passe Markup und Stile für deine nächste Umsetzung an.
21 Tools in dieser Kategorie. Alle laufen im Browser und brauchen keine Anmeldung.
SVG-Pfadeditor
Bearbeite die Form eines SVG-Pfades direkt. Verschiebe Ankerpunkte und Kurvengriffe und kopiere dann den Pfad oder speichere dein SVG.
SVG-Optimierer
Optimiere statische SVGs lokal mit SVGO. Vergleiche das Ergebnis und lade einzelne Dateien oder ein ZIP-Archiv herunter.
SVG → JSX
Wandle SVG-Code in JSX um, um ihn in React-Komponenten zu verwenden.
SVG → React Native
Wandle SVG in React-Native-Komponenten um, um Vektorgrafiken in deiner App zu verwenden.
HTML → JSX
Wandle HTML in JSX um, um das Markup in React-Komponenten wiederzuverwenden.
HTML → Pug
Wandle HTML-Code in Pug-Vorlagen um und prüfe das erzeugte Ergebnis.
Markdown → HTML
Wandle Markdown-Text in HTML um, um formatierte Inhalte auf Webseiten anzuzeigen.
Flexbox-Generator
Gestalte ein echtes Flex-Layout. Passe den Container und seine Elemente an, teste verschiedene Breiten und übernimm anschließend den CSS-, HTML- oder Tailwind-Code.
CSS-Clip-Path-Generator
Gestalte eine Form direkt auf der Zeichenfläche. Ziehe die Eckpunkte eines Polygons, probiere abgerundete Formen aus und exportiere CSS oder ein SVG.
Box-Shadow-Generator
Erzeuge Schicht für Schicht räumliche Tiefe. Bewege die Lichtquelle, passe Weichheit und Farbe an und kopiere einen Schatten, der direkt einsatzbereit ist.
CSS-Grid-Generator
Gestalte ein CSS-Grid-Layout visuell. Lege Spalten und Zeilen fest, ziehe über Zellen, um Bereiche zu benennen, und kopiere CSS, HTML oder Tailwind.
Cubic-Bezier-Generator
Forme CSS-Easing-Kurven, indem du zwei Griffe ziehst. Vergleiche die Bewegung mit linearem Timing und kopiere cubic-bezier() für Transitions oder Tailwind.
Border-Radius-Generator
Runde jede Ecke einzeln ab, wechsle zu elliptischen Radien und ziehe Kantengriffe, um Blob-Formen zu modellieren. Kopiere border-radius-CSS oder Tailwind.
Glassmorphism-Generator
Erstelle Milchglas-Panels mit backdrop-filter. Passe Unschärfe, Transparenz, Sättigung und Rahmen auf einem Live-Hintergrund an und kopiere das CSS.
CSS-Verlaufsgenerator
Lineare, radiale und konische CSS-Verläufe mit verschiebbaren Farbstopps, Winkelregler und Presets erstellen. CSS oder Tailwind-Klasse kopieren. Kostenlos.
CSS → JS Objects
Wandle CSS-Deklarationen in JavaScript-Objekte zur Verwendung im Code deiner Oberfläche um.
CSS → template literal
Wandle als Objekte definierte Stile in Template-Literale um, um sie in deinem Code wiederzuverwenden.
CSS → TailwindCSS
Wandle CSS-Code in Tailwind-CSS-Klassen um und prüfe die erzeugten Utility-Klassen.
Less → CSS
Kompiliere Less-Code zu standardmäßigem CSS für die Verwendung im Browser.
Scss → CSS
Kompiliere SCSS-Code zu standardmäßigem CSS und prüfe das erzeugte Ergebnis.
Sass → CSS
Kompiliere Sass-Code zu standardmäßigem CSS für deine Stylesheets.