Handytool
KehittäjilleIlmainenSuoritetaan paikallisesti

Box Shadow -generaattori

Rakenna ja esikatsele CSS-laatikovarjoja kerros kerrallaan — kopioi yhdellä napsautuksella.

Esikatselu
CSS
box-shadow: 0px 8px 24px -4px rgba(10, 10, 10, 0.18);

Säädä liukureilla varjoa — kopioi CSS, kun se näyttää oikeilta.

Box Shadow -generaattori – tietoa

Handytooling box shadow -generaattori auttaa täydellisen varjon rakentamisessa elementille säätämällä X ja Y-siirtymää, blur-sädettä, levitystä ja väriä. Lisää useita varjokerroksia, esikatsele yhtä aikaa muokattavan koon ja taustan kanssa, ja kopioi luotu CSS suoraan tyylilehteesi. Kaikki lasketaan selaimessa — laajennuksia tai kääntäjiä ei tarvita.

Box Shadow -generaattori – ominaisuudet

  • 01

    Rajattomat varjokerrokset

    Lisää niin monta varjoa kuin haluat ja pinoa ne pilkuilla monimutkaisiin syvyys- ja pintavaikutuksiin.

  • 02

    Live esikatselu teemoilla

    Valitse taustaväri, koko ja tekstityyli nähdäksesi, miltä varjosi näyttää oikealla elementillä, millä tahansa kontrastiyhdistelmällä.

  • 03

    Puhdas CSS-vienti

    Kopioi täydellinen box-shadow CSS-ominaisuus, valmis liitettäväksi suoraan tyylilehteesi — kääntäjää ei tarvita.

Box Shadow -generaattori – UKK

Voinko kopioida Chrome DevTools:ista tarkasti?
Kyllä. DevTools:ista kopiointi liittää tyylideklaraation ja jäsennän huolellisesti siirtymän, sumennuksen, leviämisen ja värin oikeisiin arvoihin.
Mitä spread radius tekee?
Leviämissäde suurentaa (tai pienentää, jos negatiivinen) varjoaluetta ennen sumennuksen soveltamista. Positiiviset arvot tekevät varjosta suuremman; negatiiviset tekevät sen pienemmäksi kuin elementti.
Tukeeko inset-varjoja?
Kyllä. Merkitse inset-valintaruutu mihin tahansa kerrokseen varjon sisäpuolelle asettamiseksi — täydellinen masennusvaikutuksiin.
Mikä on box-shadow-parametrien järjestys?
offsetX offsetY blurRadius spreadRadius color [inset]. Handytool järjestelee kaiken puolestasi.

Liittyvät työkalut

Kehittäjille →

Tutustu muihin työkaluihin

Kaikki työkalut →