Litagradíent rafall

Búðu til línulegan, hringlaga eða keilulaga stigul, bættu við litastoppum, stilltu stefnuna og afritaðu CSS-kóðann með einum smelli.

Tegund stiguls
Litastopp
CSS
Breyttu stoppunum og stefnunni til að móta stigulinn.

Hver litastigull er teiknaður beint í vafranum þínum. Engu af því sem þú stillir hér er hlaðið upp á BroBroGo.

Algengar spurningar

Hver er munurinn á línulegum, hringlaga og keilulaga stiglum?

Línulegur (linear) stigull blandar litum eftir beinni línu sem þú stýrir með horni. Hringlaga (radial) stigull dreifir þeim út á við frá miðjunni í hring eða sporbaug. Keilulaga (conic) stigull sveipar þeim í kringum miðjuna eins og litahjól.

Hvað eru litastopp?

Hvert litastopp er litur sem er festur við ákveðna staðsetningu á stiglinum — 0% í byrjun, 100% í enda. Færðu stopp til að breyta því hvar liturinn nær hámarki, eða bættu við fleiri stoppum til að fá ríkari blöndun. Þú getur notað allt að átta stopp.

Hvernig stjórna ég stefnunni?

Fyrir línulegan (linear) eða keilulaga (conic) stigul ákveður hornasleðinn stefnuna — 0° vísar upp, 90° vísar til hægri. Hringlaga (radial) stigull hefur ekkert horn; veldu þess í stað hring- eða sporbaugslögun til að breyta því hvernig hann dreifist.

CSS Cubic Bezier rafallDragðu handföngin tvö til að móta hreyfisveigju, fylgstu með punktinum hreyfast og afritaðu cubic-bezier() gildið.Box Shadow rafallDragðu sleða til að móta box-shadow, raðaðu lögum til að skapa dýpt og afritaðu tilbúið CSS samstundis.Border Radius rafallRúnnaðu hvert horn með sleðum, búðu til lífræn form með eldingarlaga stillingu og afritaðu CSS-kóðann samstundis.Flexbox rafallSettu upp flex-gám og einingar hans með myndrænum stýringum, sjáðu breytingarnar í rauntíma og afritaðu CSS-kóðann með einum smelli.CSS Grid rafallStilltu dálka og raðir, dragðu yfir reitina til að staðsetja einingar og afritaðu grid-CSS ásamt samsvarandi HTML með einum smelli.CSS clamp() reiknivélSláðu inn stærð fyrir litla og stóra skjái og fáðu flæðandi clamp() gildi sem breytist mjúklega á milli — fyrir leturstærðir, spássíur eða bil.LitabreytirBreyttu litum á milli HEX, RGB, HSL, HSV, CMYK og LAB — breyttu hvaða reit sem er og hinir uppfærast jafnharðan.CSS snyrtir og þjappiEndurdregðu flókið CSS til að lesa það, eða þjappaðu því fyrir útgáfu — með öruggum ham sem breytir aldrei röð reglna.BirtuskilamælirSláðu inn texta- og bakgrunnslit til að sjá WCAG-birtuskilahutfallið og hvaða AA- og AAA-kröfur standast.