Tools · CSS
Kostenlose CSS-Tools
Visuelle Baukästen für CSS, das man sonst durch Probieren einstellt: einen Verlauf ziehen, Schatten stapeln, Border-Radius oder Clip-Path formen, eine Easing-Kurve zeichnen, Flexbox und Grid mit Live-Vorschau anordnen und ein Stylesheet minifizieren oder formatieren. Kopiere das fertige CSS; nichts wird hochgeladen.
CSS-Verlauf erstellen
Erstelle einen linearen, radialen oder konischen CSS-Verlauf, und kopiere den Code.
CSS-Schatten erstellen
Erstelle einen mehrschichtigen CSS-Schatten (box-shadow) mit Live-Vorschau, und kopiere den Code.
CSS-Ecken abrunden
Gestalte jede Ecke einer Box einzeln, oder verschmelze sie zu einer organischen Blob-Form, und kopiere das border-radius-CSS.
Glassmorphism-Effekt erstellen
Erstelle eine Milchglas-Karte mit Hintergrundunschärfe, Transparenz und weichem Rand, und kopiere das CSS.
Cubic-Bezier-Easing-Generator
Ziehe eine Kurve, um einen cubic-bezier()-Easing-Wert zu erstellen, sieh sie mit einem echten CSS-Übergang live abspielen, und kopiere den Code.
Clip-Path-Generator
Erstelle eine CSS-clip-path-Form - Polygon, Kreis, Ellipse oder Inset - mit Live-Vorschau, und kopiere den Code.
CSS-Minifizierer & -Formatierer
Minifiziere oder formatiere CSS, live während du einfügst, vollständig in deinem Browser.
Flexbox-Spielwiese
Erstelle ein CSS-Flexbox-Layout - Richtung, Umbruch, Ausrichtung, Abstand sowie Wachstum, Schrumpfung und Basis je Element - mit Live-Vorschau, und kopiere den Code.
Grid-Spielwiese
Erstelle ein CSS-Grid-Layout - Spurenzahl, Abstände, Ausrichtung sowie Platzierung je Element - mit Live-Vorschau, und kopiere den Code.