Box Shadow Generator
Suunnittele kerrostettuja varjoja offsetilla, sumennuksella, leviämisellä ja väreillä. Esikatsele kortilla ja kopioi CSS yhdellä napsautuksella.
Box Shadow Generator
LiveCSS output
box-shadow: 8px 16px 32px -4px rgba(192, 38, 211, 0.35); border-radius: 24px;
Key capabilities
- Suunnittele kerrostetut laatikkovarjot offsetilla, sumennuksella, leviämisellä ja väreillä – mukana live esikatselu.
- Toimii selaimessasi
- Ilmainen käyttää
Kuinka käyttää
- Säädä siirtymää, sumennusta ja leviämistä.
- Valitse väri ja peittävyys (tai lisää kerroksia).
- Kopioi ruutuvarjo-CSS.
How this tool works
- Säädä siirtymää, sumennusta ja leviämistä.
- Valitse väri ja peittävyys (tai lisää kerroksia).
- Kopioi ruutuvarjo-CSS.
Recommended settings
- Käytä ensin oletusasetuksia ja säädä sitten tarvittaessa
Supported formats
Text / on-page input
File size and limits
- Erittäin monimutkainen monikerroksinen esikatselu saattaa tuntua hitaammalta vanhemmissa puhelimissa.
Privacy
Väri- ja CSS-generaattorit toimivat kokonaan selaimessasi. Esikatselut ja konversiot eivät koskaan lataa tyylejäsi.
Common use cases
- Käytä Box Shadow Generatoria aina kun tarvitset: Suunnittele kerroksittain laatikkovarjoja offsetilla, sumennuksella, leviämisellä ja väreillä – mukana live esikatselu.
Troubleshooting
Esikatselu näyttää erilaiselta liittämisen jälkeen
Tarkista, onko sivullasi kilpailevaa CSS:ää (nollaukset, periytyneet värit). Kopioi luotu sääntö ensin eristettyyn tyylitaulukkoon.
FAQ
Lataako tämä CSS:ni?
Ei. Generaattorit ja muuntimet toimivat selaimessasi live-esikatselulla.
Tarvitsenko tilin?
Ei. Avaa työkalu, säädä säätimiä ja kopioi CSS.
Aiheeseen liittyvät työkalut
Text Shadow Generator
Craft readable text-shadow styles with live typography preview.
Open toolBorder Radius Generator
Control each corner independently and preview rounded shapes with copy-ready CSS.
Open toolCSS Gradient Generator
Build linear, radial, and conic gradients with live preview and copy-ready CSS.
Open tool