CSS Tools & Rechner

gradient CSS-Farbverlauf-Generator Gestalten Sie lineare, radiale und konische CSS-Farbverläufe mit Live-Vorschau und kopieren Sie den Code. Erstellenchevron_right layers CSS-Box-Shadow-Generator Gestalten Sie einen box-shadow visuell — Versatz, Unschärfe, Ausdehnung, Farbe, Deckkraft und Inset — mit Live-Vorschau. Erstellenchevron_right rounded_corner CSS Border-Radius-Generator Runden Sie jede Ecke einzeln oder alle zusammen, in px oder %, mit Live-Vorschau und kopierbarem CSS. Erstellenchevron_right text_format CSS Text-Schatten-Generator Gestalten Sie einen text-shadow mit Versatz, Unschärfe, Farbe und Deckkraft — Live-Vorschau an Beispieltext. Erstellenchevron_right blur_on CSS-Glasmorphismus-Generator Gestalten Sie einen Glaseffekt (Glasmorphismus) mit Live-Vorschau — passen Sie Unschärfe, Transparenz, Farbton und Rahmen an und kopieren Sie das CSS. Erstellenchevron_right border_style CSS-Rahmen-Generator Gestalten Sie einen Rahmen visuell — Breite, Stil (solid, dashed, dotted, double…), Farbe und Radius — mit Live-Vorschau. Erstellenchevron_right transform CSS Transform-Generator Kombinieren Sie rotate, scale, translate und skew visuell und kopieren Sie das resultierende transform-CSS. Erstellenchevron_right swap_vert CSS-Scrollbar-Generator Gestalten Sie eine benutzerdefinierte farbige Scrollbar mit Live-Vorschau und kopieren Sie das CSS — kompatibel mit WebKit und Firefox. Erstellenchevron_right speed CSS Transition-Generator Erstellen Sie eine Transition — Eigenschaft, Dauer, Zeitfunktion und Verzögerung — und testen Sie sie live mit einem Klick. Erstellenchevron_right photo_filter CSS-Filter-Generator Mischen Sie blur, brightness, contrast, grayscale, hue-rotate, saturate, sepia und invert mit Live-Vorschau. Erstellenchevron_right animation CSS-Animations-Generator Ein Keyframe-Preset wählen — Drehen, Pulsieren, Hüpfen, Wackeln, Ausblenden, Gleiten — Dauer und Wiederholungen einstellen, @keyframes + Klasse kopieren. Erstellenchevron_right view_column CSS-Flexbox-Spielwiese Passen Sie flex-direction, justify-content, align-items, wrap und gap an Live-Boxen an und kopieren Sie das Container-CSS. Startenchevron_right mouse CSS-Cursor-Auswahl Fahren Sie über jeden CSS-Cursor-Wert, um ihn live zu testen, und klicken Sie, um die cursor-Deklaration zu kopieren. Startenchevron_right view_week CSS-Mehrspalten-Generator Text in zeitungsartige Spalten fließen lassen — Anzahl, Abstand und Trennlinie — mit Live-Vorschau und CSS. Erstellenchevron_right format_size Schriftgrößen-Skala-Generator Erstellen Sie eine modulare Typografie-Skala aus Basisgröße und Verhältnis — Live-Vorschau, px/rem-Tabelle und kopierfertige CSS-Variablen. Erstellenchevron_right text_fields Fluid-Typografie-Rechner — CSS clamp() Erzeugt eine CSS-clamp()-Anweisung, die die Schriftgröße sanft zwischen zwei Viewport-Breiten skaliert — keine Breakpoints nötig. Startenchevron_right view_column Grid-Spalten-Rechner Spaltenbreiten für beliebigen Container, Spaltenanzahl und Abstand — mit kopierfertigem CSS-Grid-Code und mehrspaltigen Span-Größen. Startenchevron_right