Box Shadow -generaattori

Säädä laatikon varjoa liukusäätimillä, pinoa tasoja syvyyden luomiseksi ja kopioi valmis CSS-koodi heti.

Varjotasot
Taso 1
CSS
Muotoile varjoa säätämällä liukusäätimiä.

Jokainen varjo renderöidään selaimessasi. Mitään tekemiäsi asetuksia ei lähetetä BroBroGo-palveluun.

UKK

Mitä siirtymä, pehmennys ja levitys tarkalleen ottaen ohjaavat?

Siirtymä (offset) liikuttaa varjoa vasemmalle/oikealle ja ylös/alas, pehmennys (blur) pehmentää sen reunoja ja levitys (spread) kasvattaa tai kutistaa sitä ennen pehmennystä. Negatiivinen levitys vetää varjoa sisäänpäin, mikä on hyödyllistä tiiviissä, lähellä olevissa varjoissa.

Mitä inset-vaihtoehto tekee?

Tavallinen varjo lankeaa elementin ulkopuolelle, kuten valo kohotetun kortin takana. Inset-asetus kääntää varjon sisäpuolelle, jolloin elementti näyttää upotetulta – tämä on kätevää esimerkiksi syöttökentissä tai painetuissa painikkeissa.

Miksi kannattaa käyttää useampaa kuin yhtä varjotasoa?

Yksittäinen varjo näyttää litteältä tietyn koon jälkeen. Luonnollinen syvyysvaikutelma syntyy yleensä yhdistämällä tiivis, tumma varjo pehmeämpään ja leveämpään varjoon – lisää toinen taso ja säädä niitä erikseen saavuttaaksesi tämän vaikutelman.

CSS Cubic Bezier -generaattoriMuotoile kevennyskäyrää vetämällä kahta kahvaa, seuraa pisteen liikettä suhteessa tasaisen nopeaan ja kopioi cubic-bezier()-arvo.Liukuväri-generaattoriLuo lineaarinen, säteittäinen tai kartiomainen liukuväri, lisää väripisteitä ja aseta suunta, ja kopioi sitten CSS yhdellä klikkauksella.Border Radius -generaattoriPyöristä kulmat liukusäätimillä, luo orgaanisia muotoja elliptisellä tilalla ja kopioi CSS-koodi heti.Flexbox-generaattoriMääritä flex-säiliö ja sen elementit visuaalisilla ohjaimilla, seuraa asettelun muutoksia reaaliajassa ja kopioi CSS yhdellä klikkauksella.CSS Grid -generaattoriMääritä sarakkeet ja rivit, vedä solujen yli sijoittaaksesi elementtejä ja kopioi grid-CSS sekä vastaava HTML yhdellä klikkauksella.CSS clamp() -laskuriSyötä koko pienille ja suurille näytöille ja saat joustavan clamp()-arvon, joka skaalautuu sujuvasti niiden välillä – sopii fonttikoille, sisällyksille tai väleille.VärimuunninMuunna värejä muotojen HEX, RGB, HSL, HSV, CMYK ja LAB välillä – muokkaa mitä tahansa kenttää ja muut päivittyvät reaaliajassa.CSS-muotoilija ja -minifoijaSisennä sekava CSS helposti luettavaksi tai minifoi se julkaisua varten – mukana turvallinen tila, joka säilyttää sääntöjen järjestyksen.KontrastilaskuriSyötä tekstin ja taustan väri nähdäksesi WCAG-kontrastisuhteen ja sen, mitkä AA- ja AAA-tasot hyväksytään.