Design & CSS
Design- & CSS-Tools: Farbverläufe, Paletten, Kontrast, Schatten, Glassmorphism, Flexbox/Grid, Cubic-Bezier und mehr.
Gradient-Generator
CSS-Farbverläufe (linear und radial) online erzeugen und kopieren — Farben, Winkel und Typ frei wählen. Kostenlos, kein Login, direkt im Browser.
Farbpaletten-Generator
Harmonische Farbpaletten aus einer Basisfarbe online erstellen — analog, komplementär, triadisch. HEX-Werte direkt kopieren, kostenlos im Browser.
Kontrast-Checker
WCAG-Kontrastverhältnis zweier Farben online prüfen — AA- und AAA-Anforderungen für normale und große Schrift. Barrierefreiheit kostenlos testen.
Box-Shadow-Generator
CSS box-shadow online und visuell erzeugen — Blur, Spread, Farbe und Deckkraft einstellen, Innenschatten möglich. Code sofort kopieren, kostenlos.
Border-Radius-Generator
CSS border-radius online und visuell erzeugen — alle vier Ecken einzeln oder gemeinsam einstellen. Code sofort kopieren, kostenlos, kein Download.
Favicon-Generator
Favicons aus Text oder Emoji kostenlos online erzeugen und als PNG herunterladen — App-Icon und Browser-Tab-Icon ohne Software, kein Upload nötig.
Farb-Konverter
Farben zwischen HEX, RGB und HSL online umrechnen — auch CSS-Farbnamen (z. B. „tomato") werden erkannt. Kostenlos, kein Upload, direkt im Browser.
Glassmorphism-Generator
Milchglas-Effekt (backdrop-filter) per Live-Vorschau einstellen — Blur, Transparenz und Radius wählen, CSS-Code sofort kopieren. Kostenlos im Browser.
Neumorphism-Generator
Soft-UI-Schatten (Neumorphism) für CSS online gestalten — Farbe, Abstand und Unschärfe einstellen, Inset-Modus wählen, Code sofort kopieren. Kostenlos.
Flexbox-Generator
Flexbox-Layout per Steuerelementen online bauen — Properties wie justify-content und align-items visuell einstellen, CSS direkt kopieren. Kostenlos.
CSS-Grid-Generator
CSS-Grid online bauen — Spalten, Zeilen und Gap visuell einstellen, Live-Vorschau, CSS-Code direkt kopieren. Kostenlos im Browser, kein Download nötig.
Clip-Path-Generator
CSS clip-path Formen (Dreieck, Stern, Sechseck u. a.) online gestalten — Live-Vorschau, fertigen Code sofort kopieren. Kostenlos, kein Login nötig.
Cubic-Bezier-Editor
CSS-Easing-Kurve (cubic-bezier) visuell bearbeiten — mit Vorschau-Animation.
CSS-Animation-Generator
CSS-Keyframe-Animationen (Fade, Slide, Bounce …) mit Live-Vorschau und @keyframes-Code.
Farbenblindheit-Simulator
Wie wirken Farben bei Farbsehschwäche? Simulation für Protanopie, Deuteranopie, Tritanopie und Achromatopsie.
Schriftarten-Paarung
Überschrift- und Text-Schriften kombinieren (web-sichere Stacks, keine externen Fonts) — Live-Vorschau und CSS.