Design & CSS

Verwandle einen Code-Schnipsel im Browser in ein Bild mit Syntaxhervorhebung – mit über 20 Sprachen, eigenen Themes und Hintergründen, Zeilennummern und PNG- oder SVG-Export.

Prüfe den WCAG-2.1-Kontrast und den APCA-Lc-Wert zwischen Text und Hintergrund, sieh AA-, AAA- und 3:1-Badges und wende die nächste bestandene Farbe an.

Mische zwei HEX-Farben in einem gewählten Verhältnis im RGB- oder Lab-Farbraum und lies die entstehende Mittelfarbe als Farbfeld und kopierbaren HEX-Wert ab.

Verwandle eine HEX-Basisfarbe in eine OKLCH-, HSL- oder RGB-Skala mit einstellbaren Stufen, WCAG-Kontrasthinweisen pro Stufe und Export als CSS, Tailwind und JSON.

Lade ein Bild hoch und sieh dir die Vorschau an, wie es bei Protanopie, Deuteranopie, Tritanopie oder vollständiger Farbenblindheit aussieht, und lade dann das simulierte Ergebnis herunter.

Passe alle acht Border-Radius-Eckwerte an, einschließlich elliptischer horizontaler und vertikaler Radien, sieh dir eine Live-Vorschau der Box an und kopiere das verkürzte CSS.

Erstelle mehrschichtige CSS-box-shadow-Werte mit Steuerung für Versatz, Weichzeichnung, Spread, Farbe und inset, sieh eine Live-Vorschau und kopiere die fertige Eigenschaft.

Verwandle eine minimale und maximale Schriftgröße sowie eine minimale und maximale Viewport-Breite in einen einzigen, breakpoint-freien CSS-clamp()-Ausdruck für fluide Typografie.

Erstelle einen CSS-clip-path aus Presets für Kreis, Ellipse, Polygon, Inset oder gerundetes Inset mit Zahleneingaben, sieh ihn live in der Vorschau und kopiere die einsatzbereite Eigenschaft.

Bearbeite eine CSS-cubic-bezier- oder steps()-Easing durch Ziehen der Griffe, sieh sie in einer Live-Animation und kopiere den fertigen Wert.

Baue CSS Flexbox oder Grid visuell mit Container- und Pro-Element-Steuerung, eigener Track-Größe und grid-template-areas-Editor und kopiere das CSS.

Erzeuge CSS für Milchglas mit Reglern für Unschärfe, Transparenz, Sättigung, Rahmen und Schatten sowie einer Tönungsfarbe, betrachte es als Vorschau über einem Hintergrund und kopiere das backdrop-filter-CSS.