CSS box-shadow-generator
Bouw een CSS box-shadow-waarde op uit offset, vervaging, verspreiding en kleur, met meerdere lagen en voorinstellingen.
CSS box-shadow-generator
Pas de horizontale en verticale verschuiving, vervagingsradius, verspreidingsradius en kleur aan, en deze tool stelt de overeenkomstige box-shadow-verklaring samen terwijl u werkt. Het is ontworpen voor het dagelijkse geval - een kaart, een knop, een modale afbeelding die van de pagina af moet steken - evenals voor gelaagde schaduwen die uit meerdere schaduwen bestaan die op elkaar gestapeld zijn, de techniek achter de zachte, realistische diepte die in de meeste moderne designsystemen wordt gebruikt.
Het dropdown-menu Voorinstellingen biedt subtiele, gemiddelde en sterke elevatie, elk met zijn eigen vooraf ingestelde laagaantal, verschuiving en vervaging; kies Aangepast om elke waarde zelf in te stellen. De optie Lagen bepaalt hoeveel schaduwen op elkaar liggen: elke toegevoegde laag vergroten de verschuiving en vervaging ten opzichte van de eerste laag en verlagen de dekkingsgraad, waarbij een enkele vlakke schaduw in een zachte, overtuigende wordt omgezet. Inzet flipt de schaduw inwaarts voor ingedrukte elementen, dekking bepaalt hoe sterk de kleur wordt gelezen, en de eenheidsschakelaar geeft px of rem uit. Schakel de dark mode-variant in voor een tweede, sterkere verklaring in een @media (prefers-color-scheme: dark)-blok - een schaduw moet met hogere dekkingsgraad zichtbaar blijven op een donkere achtergrond. Kies of het resultaat als een enkele regel, een aangepaste --box-shadow-eigenschap of een .box-shadow-klasse uitkomt, en voeg een overeenkomstige filter: drop-shadow-regel toe voor elementen die box-shadow niet kan bereiken, zoals een SVG-pictogram of een transparante PNG.
Elke waarde is beperkt tot een redelijk bereik, en een onherkenbare kleur valt terug op zwart in plaats van ongeldige CSS te produceren, dus de output blijft altijd schoon in een stylesheet plakken.
Alles wordt in uw browser uitgevoerd terwijl u de besturingselementen aanpast - geen kleur of gegenereerde CSS wordt ooit ergens naartoe verzonden. Kopieer het resultaat, download het als .txt-bestand, of stuur het naar een ander hulpmiddel om er mee door te gaan.