Design & CSS

Verwandle einen Code-Schnipsel direkt im Browser in eine elegante PNG-Karte mit Syntaxhervorhebung – mit Theme, Verlaufs- oder transparentem Hintergrund und Innenabstand, ganz ohne Upload.

Prüfe das WCAG-Kontrastverhältnis zwischen einer Vordergrund- und einer Hintergrund-HEX-Farbe und sieh, ob es AA und AAA für normalen und großen Text besteht.

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 Tailwind-typische Tonwertskala von 50 bis 950, gemischt zu Weiß und Schwarz, jede Stufe mit Farbfeld und kopierbarem HEX-Wert.

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 die vier Kontrollpunkte einer CSS-cubic-bezier-Easing-Kurve, ziehe die Griffe oder gib die Werte ein, sieh dir die Kurve in der Vorschau an und kopiere die cubic-bezier()-Funktion.

Passe die Container-Eigenschaften für CSS Flexbox oder Grid an, sieh dem Layout live beim Aktualisieren zu und kopiere das generierte 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.