Design & CSS

Skapa färger, responsiv storlek och produktionsklar CSS.

Färg och tillgänglighet

FärgkonverterareKonvertera färger mellan HEX, RGB, HSL, HSV, CMYK och LAB – ändra valfritt fält så uppdateras resten automatiskt.Specialiserade sidor (8)
KontrastkontrollAnge en text- och bakgrundsfärg för att se WCAG-kontrastförhållandet och vilka AA- och AAA-nivåer som blir godkända.

CSS-layout och effekter

Box Shadow-generatorDra i reglagen för att forma en box-shadow, stapla lager för djup och kopiera den färdiga CSS-koden direkt.
Gradient-generatorBygg en linjär, radiell eller konisk toning, lägg till färgstopp och ställ in riktningen, och kopiera sedan CSS-koden med ett klick.
Border Radius-generatorRunda varje hörn med reglage, skapa organiska former med det elliptiska läget och kopiera din CSS direkt.
Flexbox-generatorSkapa en flex-container och dess objekt med visuella kontroller, se layouten reagera direkt och kopiera CSS-koden med ett klick.
CSS Grid-generatorStäll in kolumner och rader, dra över cellerna för att placera ut objekt och kopiera CSS-koden med matchande HTML med ett klick.
CSS Cubic Bezier-generatorDra i de två handtagen för att forma en övergångskurva, se en punkt följa den bredvid en linjär rörelse och kopiera cubic-bezier()-värdet.
CSS clamp()-kalkylatorAnge en storlek för små och stora skärmar och få ett flytande clamp()-värde som skalas mjukt däremellan – för textstorlekar, padding, marginaler eller gap.

Skärm, utskrift och proportioner

Typsnittsinspektion och licensiering

Licens- och info-kontroll för typsnittÖppna en lokal typsnittsfil för att läsa dess inbäddade namn, licenstext och flaggor för dokumentinbäddning – som filbevis, inte som bevis på att du innehar en licens.