Design og CSS

Lag farger, responsiv størrelse og produksjonsklar CSS.

Farger og universell utforming

FargekonvertererKonverter farger mellom HEX, RGB, HSL, HSV, CMYK og LAB — rediger et felt og resten oppdateres fortløpende.Spesialiserte sider (8)
KontrastsjekkerSkriv inn tekst- og bakgrunnsfarge for å se WCAG-kontrastforholdet og hvilke AA- og AAA-nivåer som blir bestått.

CSS-layout og effekter

Box Shadow-generatorDra i glidebryterne for å forme en box-shadow, stable lag for dybde, og kopier den ferdige CSS-koden umiddelbart.
Gradient-generatorBygg en lineær, radial eller konisk gradient, legg til fargepunkter og angi retning, og kopier deretter CSS-koden med ett klikk.
Border Radius-generatorRund av hvert hjørne med glidebrytere, lag organiske former med elliptisk modus, og kopier CSS-koden umiddelbart.
Flexbox-generatorSett opp en flex-container og tilhørende elementer med visuelle kontroller, se layouten reagere live, og kopier CSS-koden med ett klikk.
CSS Grid-generatorDefiner kolonner og rader, dra over rutene for å plassere elementer, og kopier CSS-koden med tilhørende HTML med ett klikk.
CSS Cubic Bezier-generatorDra i de to håndtakene for å forme en overgangskurve, se en prikk følge den mot en jevn bevegelse, og kopier cubic-bezier()-verdien.
CSS clamp()-kalkulatorAngi en størrelse for små og store skjermer og få en flytende clamp()-verdi som skalerer trinnløst i mellom — for skriftstørrelser, padding, marginer eller gap.

Skjerm, trykk og proporsjoner

Skrifttypeinspeksjon og lisensiering

Sjekk av fontlisens og infoÅpne en lokal font for å lese dens innebygde navn, lisenstekst og flagg for dokumentinnbygging — som filbevis, ikke som bevis på at du har en lisens.