Wat is de CSS-doosschaduwgenerator?
De CSS Box Shadow Generator is een visuele editor voor de eigenschap CSS Box-Shadow. Je past de offset, vervaagde straal, spreidstraal, kleur en dekking aan met schuifregelaars en ziet het resultaat live op een voorbeeldelement weergeven, en kopieer vervolgens de exacte CSS. In plaats van pixelwaarden te raden en de pagina opnieuw te laden, vorm je de schaduw direct en lees je de code die het produceert.
Open deze CSS box shadow generator en het begint op de Card preset, twee lagen die kopiëren als box-shadow: 0px 4px 6px -1px #000001a, 0px 2px 4px -2px #000001a; De Opacity slider wordt gebakken in de hex kleur, dus 10% wordt de 1a aan het einde Klik op de Inner preset en de declaratie verandert in box-shadow: inset 0px 2px 4px onder 0px #00000000 schaduwp vermeld op de laatste laag.
De eigenschap Box-Shadow is bedrieglijk diep. Een enkele declaratie kan verschillende schaduwen stapelen, elk met zijn eigen offsets, onscherpte, verspreiding, kleur en een optioneel inzetsleutelwoord dat de schaduw in het element schildert in plaats van buiten. Echte interfaceschaduwen gebruiken bijna altijd twee of meer lagen om er natuurlijk uit te zien, wat vervelend is om met de hand te schrijven. Deze tool beheert de lagen voor u en voert een spec-valid declaratie uit in de juiste door komma's gescheiden volgorde.
Alles gebeurt in uw browser. Kies een voorinstelling, stem de lagen af, wissel de preview tussen lichte en donkere achtergronden en kopieer de standaardeigenschap of een blok dat ook het -webkit-voorvoegsel bevat. Geen account, geen uploads en het blijft offline werken zodra de pagina is geladen.
Schaduwen worden buiten de doos geschilderd en nemen geen ruimte in beslag, dus ze duwen buren nooit rond en worden door elke voorouder geknipt met verborgen overloop. Verspreiding is de minst begrepen waarde: het groeit of krimpt de schaduwvorm voordat het vervaagt, dus een positieve spreiding zonder vervaging geeft een solide offset-omtrek, en zo worden grenseffecten vervalst zonder de lay-out te beïnvloeden. Inzet verplaatst de schaduw binnen het element, handig voor geperste toestanden en innerlijke gloed. Het leggen van verschillende schaduwen met toenemende offset en vervaging is hoe overtuigende diepte wordt opgebouwd, aangezien een enkele grote vervaging leest als mist in plaats van als een schaduw. Elke laag kost rendertijd, en schaduwen die opnieuw schijnen tijdens scrollen of animaties zijn een veel voorkomende bron van ruches op apparaten met een lager vermogen.
Hoe gebruik je de schaduwgenerator van de CSS-box?
Begin vanaf een voorinstelling of lege laag
De pagina wordt geopend op de Card-voorinstelling Kies een andere, zoals Elevated of Neumorphic, voor een ander startpunt, of bewerk de huidige lagen rechtstreeks.
Stem de schaduw af met schuifregelaars
Sleep de schuifregelaars voor horizontale en verticale offset, vervagingsradius en spreidingsradius, stel de schaduwkleur en dekking in en vink Inzet aan om de schaduw in het vak te verplaatsen.
Stapel meer lagen indien nodig
Klik op Laag toevoegen voor diepte - een zachte brede schaduw onder een strakkere donkerdere leest als natuurlijke verhoging Nieuwe lagen gaan aan het einde, die ze onder eerdere schildert; er is geen herschikking, dus om een laag te verplaatsen, verwijder deze met het prullenbakpictogram en herbouw deze met de laag toevoegen.
Kopieer de CSS
Kopieer de box-shadow-declaratie of het vooraf geblokkeerde blok voor oudere browsers en plak deze rechtstreeks in uw stylesheet of componentstijlen.
Belangrijkste kenmerken
Meerlaagse schaduwen
Stapel een willekeurig aantal schaduwlagen in één declaratie, in de juiste lakvolgorde van boven naar beneden, zo is de echte kaart en de modale hoogte van de electronica
Volledige eigendomsbeheersing
Schuifregelaars voor horizontale en verticale offset, straalvervaging en spreidstraal, plus een kleurenkiezer, een dekkingscontrole en een inzetschakelaar omslag voor elk deel van de grammatica
Live voorbeeld
Een voorbeeldelement wordt onmiddellijk bijgewerkt terwijl u bewerkt, en u kunt de achtergrond tussen licht en donker wisselen om te controleren hoe de schaduw in beide thema's leest
Kant-en-klare voorinstellingen
Samengestelde recepten voor subtiele, kaart-, verhoogde, zwevende, innerlijke, gloed-, neomorfe en scherpe schaduwen geven je een bewezen startpunt in plaats van een leeg canvas
Frequently Asked Questions
Related Tools
CSS Border Radius Generator
Round any corner with a live preview and per-corner sliders, switch between px, %, em, and rem, and copy the shortest valid CSS border-radius.
CSS Clamp Generator
Generate fluid, responsive CSS clamp() values that scale between viewports
CSS Unit Converter
Convert between CSS units - px, rem, em, pt and % - with a configurable root font size, instant all-units output, and a px-to-rem reference table for responsive typography.
Flexbox Generator
Build CSS flexbox layouts visually. Adjust justify-content, align-items, direction, wrap and gap with a live preview, then copy the generated CSS - all in your browser.
Comments
0 comments
No comments yet. Be the first to share your thoughts!