Ik heb een keer zo'n veertig minuten geprobeerd een schaduw uit een Figma-bestand te matchen De ontwerper had me een kleur gegeven, een X en Y offset, een vervaging en een spread, wat alles is wat je nodig hebt, en ik kon het er nog steeds niet goed uit laten zien. De schaduw in de browser was zwaarder en vlakker dan de mockup, en ik bleef de vervagingsradius op en neer duwen alsof dat het zou repareren.
Dat zou niet, want de mockup had twee schaduwen gestapeld Een strakke donkere voor contact, een brede zachte voor omgevingslicht Figma toonde ze als aparte lagen in een paneel dat ik had ingeklapt Toen ik ze eenmaal als een komma-gescheiden paar had geschreven was de wedstrijd meteen.
Dat is het ding over de CSS-eigenschappen in deze gids Geen van hen zijn ingewikkeld Ze hebben allemaal een of twee gedragingen die niet duidelijk uit de syntaxis, en je kunt een middag verliezen aan een van hen Deze gids is dat gedrag, opgeschreven.
Elke hier gekoppelde generator draait in uw browser, werkt een live preview bij terwijl u sleept en overhandigt u de CSS. Ik bouw ze op [Toolz.dev] (/en gebruik ze voortdurend, vooral omdat het lezen van een steno met vier waarden moeilijker is dan naar een rechthoek kijken.
tl;dr: goed doen Box Shadow voor diepte, Tekst Shadow voor gloed en contouren, Border Radius voor hoeken, inclusief de elliptische hoeken CSS-filters voor onscherpte, helderheid en kleureffecten, Glasmorfisme voor matte panelen, Neumorfisme voor zachte verhoogde oppervlakken, Gradiënten voor achtergronden, en de CSS-eenheidconverter wanneer u px in rem nodig hebt Ze draaien allemaal client-side met een live preview De twee regels die de moeite waard zijn om mee te nemen: echte schaduwen zijn gelaagd, en
backdrop-filterheeft iets achter nodig om te vervagen.
Welke generator heb ik nodig?
| je wilt | Property | kwast |
|---|---|---|
| Een kaart die van de pagina tilt | box-shadow |
Box Shadow |
| Gloeiende, omlijnde of reliëftekst | text-shadow |
Tekst Shadow |
| Afgeronde of pilvormige hoeken | border-radius |
Border Radius |
| Een element vervagen, dimmen, desatureren of kleuren | filter |
CSS-filter |
| Een mat paneel over een foto | backdrop-filter |
Glasmorfisme |
| Een zachte knop die in het oppervlak gedrukt lijkt | gelaagd box-shadow |
Neumorfisme |
| Een kleurovergangsachtergrond | linear-gradient |
Gradiënt |
| Om 24px in rem te veranderen | geen | eenheidsconverter |
De rest van deze gids is wat iedereen doet en waar hij bijt.
Hoe werkt box-shadow?
De afkorting is vijf waarden en een kleur:
box-shadow: 0 4px 12px 0 rgb(0 0 0 / 0.15);
/* │ │ │ │ └ colour */
/* │ │ │ └ spread: grow or shrink */
/* │ │ └ blur: 0 is a hard edge */
/* │ └ vertical offset */
/* └ horizontal offset */
Verschuivingen verplaatsen de schaduw Vervaging verzacht de rand en verspreidt deze naar buiten met ongeveer de helft van de vervagingswaarde in elke richting. Verspreiding groeit of verkleint de schaduw voordat de vervaging wordt toegepast, en een negatieve spreiding is de truc voor een schaduw die onder een element zit in plaats van het te haloën.
Het deel dat mensen missen: schaduwen stapelen zich. Een door komma's gescheiden lijst geeft terug naar voren, eerste schaduw bovenaan:
box-shadow:
0 1px 2px rgb(0 0 0 / 0.20), /* contact: tight, darker */
0 8px 24px rgb(0 0 0 / 0.12); /* ambient: wide, lighter */
Daarom ziet een designer' s shadow er beter uit dan de jouwe Eén shadow leest als sticker Twee leest als een object met gewicht De Box Shadow Generator hiermee kunt u lagen toevoegen en ze allemaal afzonderlijk slepen, wat de enige verstandige manier is om ze af te stemmen.
inset verplaatst de schaduw binnen de randkast, zo krijg je een invoer die er verzonken uitziet, of de binnenste helft van een neumorf oppervlak.
Eén prestatienota die mij heeft gebeten bij echte projecten: animeren box-shadow forceert een herschildering elk frame Als u wilt dat een kaart op hover omhoog gaat, animeer dan transform en kruisvervagen een tweede element dat de grotere schaduw vasthoudt De MDN-kastschaduwreferentie documenteert de syntaxis volledig.
Waar is tekstschaduw naast slagschaduwen goed voor?
Zelfde idee, een waarde minder. text-shadow heeft geen verspreiding:
text-shadow: 1px 1px 2px rgb(0 0 0 / 0.5);
De interessante toepassingen ervan zijn helemaal geen schaduwen.
Schets. Vier harde schaduwen bij nul onscherpte, één per diagonaal, fake een slag rond tekst Het is zwaarder dan -webkit-text-stroke maar het werkt overal en het komt buiten de glyph terecht in plaats van het verschil te splitsen:
text-shadow: 1px 1px 0 #000, -1px 1px 0 #000,
1px -1px 0 #000, -1px -1px 0 #000;
Glow. Nul offset, grote onscherpte, verzadigde kleur, twee of drie keer herhaald om intensiteit op te bouwen.
Legeerbaarheid over afbeeldingen. Een enkele zachte donkere schaduw onder witte tekst koopt je contrast wanneer de achtergrond een foto is die je niet controleert Het is geen vervanging voor een juiste scrim, en het zal geen falende contrastverhouding opslaan, maar het voorkomt dat de daalders verdwijnen in een heldere patch.
Bouw ze alle drie op de Tekst Shadow Generator. Als u een contrastvereiste nastreeft in plaats van een effect, controleer dan het resultaat WCAG met de Kleurcontrast checker in plaats van ernaar te kijken.
Waarom neemt de grensstraal acht waarden aan?
De meeste mensen gebruiken er een De volledige vorm is twee groepen van vier, gescheiden door een schuine streep:
border-radius: 20px 40px 60px 80px / 40px 20px 80px 60px;
/* ─────horizontal──── ──────vertical───── */
Voor de schuine streep: de horizontale straal van elke hoek, met de klok mee van linksboven Hierna: de verticale straal Geef beide en elke hoek wordt een ellips in plaats van een kwart cirkel Zo krijg je organische kloddervormen zonder SVG.
Twee gedragingen die de moeite waard zijn om te kennen.
Percentages worden opgelost ten opzichte van verschillende assen. Een horizontale straal in % is een percentage van het element' s breedte, de verticale van zijn hoogte Dus border-radius: 50% op een rechthoek geeft een ellips, geen afgeronde rechthoek, wat mensen de eerste keer verrast.
De browser schaalt stralen naar beneden wanneer ze elkaar overlappen. Als twee aangrenzende stralen optellen tot meer dan de zijde die ze delen, worden alle stralen proportioneel verkleind totdat ze passen Je kunt de vorm niet overlopen, daarom border-radius: 9999px produceert betrouwbaar een pil.
de Grensradiusgenerator legt alle acht waarden bloot met schuifregelaars per hoek en zendt de kortste geldige steno uit, wat de moeite waard is omdat het met de hand schrijven van de schuine streepvorm werkelijk onaangenaam is.
Wat kunnen CSS-filters doen en wat kosten ze?
filter past grafische bewerkingen toe op een element en alles wat erin zit:
filter: blur(4px) brightness(1.1) saturate(1.2);
Functies stellen van links naar rechts samen, en volgorde verandert het resultaat Blurring dan verheldering is niet hetzelfde als verhelderen dan vervagen.
| Functie | Doet | Kijk voor |
|---|---|---|
blur() |
Gaussiaanse vervaging | Duur bij grote stralen; vervaagt randen naar buiten |
brightness() |
Vermenigvuldigt lichtheid | Boven 1 clips hoogtepunten naar wit |
contrast() |
Duwt waarden uit middengrijs | Verplettert snel detail |
grayscale() |
Verwijdert verzadiging | Goedkoper dan een duplicaat |
sepia() |
Warme toonkaart | Combineren met hue-rotate() voor andere tinten |
hue-rotate() |
Verschuift de tint onder een hoek | Behoudt de waargenomen lichtheid niet |
drop-shadow() |
Schaduw die volgt op alfa | In tegenstelling tot box-shadow, volgt de werkelijke vorm |
Die laatste rij is degene die het onthouden waard is. box-shadow schaduwt de randdoos, dus een transparante PNG van een logo krijgt een rechthoekige schaduw. filter: drop-shadow() traceert het alfakanaal en schaduwt het logo zelf.
De kosten zijn reëel Filters duwen een element op zijn eigen compositielaag, en blur() met name is duur over een groot gebied Prima op een knop Denk twee keer na over een paginagrote overlay op een low-end telefoon. MDN's filterreferentie somt elke functie en zijn interpolatiegedrag op.
Probeer combinaties op de CSS-filtergenerator, die het voorbeeld en de exacte aangifte naast elkaar toont.
Hoe bouw ik een glasmorfismepaneel dat werkt?
Berijpt glas is één eigenschap die het werk doet:
background: rgb(255 255 255 / 0.15);
backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgb(255 255 255 / 0.25);
backdrop-filter filtert wat is behind het element in plaats van het element zelf. Daaruit volgen drie dingen, en ze zijn verantwoordelijk voor bijna elke " waarom ziet mijn glas eruit als een grijze doos en quot; vraag.
Het heeft iets achter zich nodig. Over een vlakke achtergrondkleur is een wazige achtergrond dezelfde platte kleur. Het effect bestaat alleen via een foto, een verloop of overlappende inhoud.
De achtergrond moet doorschijnend zijn. Een volledig ondoorzichtige achtergrond verbergt de wazige achtergrond volledig Ergens tussen 10% en 25% wit is het gebruikelijke bereik.
Verzadiging is wat het verkoopt. Echt glas concentreert de kleur. saturate(180%) naast de onscherpte is er het verschil tussen matglas en een vlek.
Voeg de haarlijnrand toe omdat glas een rand heeft, en controleer het contrast voordat u het verzendt: tekst over een onscherpe foto gaat voorbij of mislukt, afhankelijk van de foto, en een paneel dat perfect op uw heldenafbeelding leest, kan onleesbaar zijn op de volgende.
de Glasmorfisme Generator voorbeelden van een daadwerkelijke afbeelding, wat hier belangrijker is dan voor enig ander effect in deze handleiding.
Is neumorfisme het gebruiken waard?
Neumorfisme, of zachte UI, zorgt ervoor dat elementen er vanaf de achtergrond uitgedreven uitzien in plaats van erboven te zweven Twee schaduwen, tegenoverliggende hoeken, één lichter dan het oppervlak en één donkerder:
background: #e0e5ec;
box-shadow: 8px 8px 16px #a3b1c6,
-8px -8px 16px #ffffff;
Wissel ze in voor een ingedrukte toestand, of gebruik ze inset op beide voor een ingekerfde look.
De techniek kent één harde beperking: het element en de achtergrond ervan moeten dezelfde kleur hebben. Het effect bestaat volledig uit twee schaduwen, dus een neumorfe knop op een andere achtergrond stopt met lezen als geëxtrudeerd en begint te lezen als gebroken.
Het heeft ook een toegankelijkheidsprobleem dat de moeite waard is om eerlijk over te zijn. De hele esthetiek is een laag contrast door de constructie, en een knop waarvan de enige mogelijkheid een zachte schaduw is, kan falen WCAG's niet-tekst contrast vereiste voor interactieve componenten Als je het gebruikt, geef knoppen dan een echte rand of een focusstijl die niet afhankelijk is van de schaduw.
de Neumorphism Generator ontleent beide schaduwkleuren aan uw oppervlaktekleur, wat het lastige deel is om met de hand te doen.
Wanneer heb ik een unit converter nodig?
Vaker dan je zou denken, omdat ontwerptools px spreken en goede CSS vaak niet.
rem is relatief ten opzichte van de root lettergrootte, dus een lay-out in rem schaalt wanneer een gebruiker zijn browser verandert' s standaard tekstgrootte. em is relatief aan de element's lettergrootte, waardoor het handig is voor opvulling die zijn eigen tekst moet volgen en verraderlijk wanneer deze wordt samengesteld via geneste elementen.
De rekenkunde is triviaal Veertig keer doen tijdens het vertalen van een spec is waar fouten insluipen, vooral als de wortelgrootte niet 16px is De CSS-eenheidconverter neemt een configureerbare root en toont elke eenheid tegelijk.
Voor gradiënten is de Gradiëntgenerator omvat lineair, radiaal en kegelsnede, en er is een langere opschrijving in de CSS-gradiëntgids.
Ze in elkaar zetten: een kaart, begin tot eind
De eigenschappen worden zelden alleen gebruikt Hier is een kaart die er vier gebruikt, gebouwd zoals ik het zou bouwen.
Begin met de vorm en de rustschaduw:
.card {
border-radius: 12px;
background: #fff;
box-shadow:
0 1px 2px rgb(0 0 0 / 0.06),
0 4px 12px rgb(0 0 0 / 0.08);
transition: transform 150ms ease, box-shadow 150ms ease;
}
Weer twee schaduwen, allebei licht Een rustkaart mag amper omhoog Bewaar het drama voor de zweefstaat.
.card:hover {
transform: translateY(-2px);
box-shadow:
0 2px 4px rgb(0 0 0 / 0.08),
0 12px 28px rgb(0 0 0 / 0.12);
}
de translateY doet het meeste waargenomen werk Beweging leest overtuigender als lift dan een grotere schaduw, en het is goedkoop omdat transformaties worden samengesteld in plaats van opnieuw geverfd.
Als de kaart op een foto staat in plaats van op een vlakke pagina, verwissel dan de witte achtergrond voor glas:
.card {
background: rgb(255 255 255 / 0.15);
backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgb(255 255 255 / 0.25);
}
Let op wat er veranderde en wat niet De straal en de schaduwen dragen onaangeroerd over Alleen de oppervlaktebehandeling verschilt, dat is het nuttige mentale model: vorm en diepte zijn één beslissing, oppervlak is een andere.
Hoe zit het met browserondersteuning en fallbacks?
Het meeste hiervan is oud en veilig. box-shadow, text-shadow, border-radius en filter worden al jaren overal ondersteund, en je kunt ze schrijven zonder een tweede gedachte.
backdrop-filter is de uitzondering de moeite waard om te behandelen Ondersteuning is nu breed, maar het is de enige eigenschap hier die een echt gebroken ogend resultaat oplevert wanneer het ontbreekt: een paneel met een 15% witte achtergrond en geen onscherpte is een bleke uitstrijk over een foto Bewaak het:
.glass {
background: rgb(255 255 255 / 0.85); /* readable fallback */
}
@supports (backdrop-filter: blur(1px)) {
.glass {
background: rgb(255 255 255 / 0.15);
backdrop-filter: blur(12px) saturate(180%);
}
}
De fallback is een meestal ondoorzichtig paneel, wat niet het effect is maar perfect bruikbaar is De verbeterde versie geldt alleen daar waar de browser het kan leveren. MDN's @supports referte dekt de syntaxis en het is de moeite waard om op elk moment een eigenschap te bereiken die een visueel kapotte faalmodus heeft in plaats van een louter duidelijkere.
Hoe houd ik effecten consistent in een project?
De faalmodus op een echte codebase is niet één slechte schaduw Het zijn veertien iets verschillende schaduwen, want iedereen die een kaart nodig had, schreef zijn eigen.
Definieer ze één keer als aangepaste eigenschappen en gebruik de namen
:root {
--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
--shadow-md: 0 1px 2px rgb(0 0 0 / 0.06),
0 4px 12px rgb(0 0 0 / 0.08);
--shadow-lg: 0 2px 4px rgb(0 0 0 / 0.08),
0 12px 28px rgb(0 0 0 / 0.12);
--radius: 12px;
}
.card { border-radius: var(--radius); box-shadow: var(--shadow-md); }
.card:hover { box-shadow: var(--shadow-lg); }
Drie schaduwstappen is meestal genoeg Als je merkt dat je een vierde toevoegt, komt dat vaak omdat een component een andere nodig heeft elevation in plaats van een andere schaduw, en het antwoord is om een bestaande stap opnieuw te gebruiken.
Dit maakt de donkere modus ook handelbaar Schaduwen die op wit werken zijn bijna onzichtbaar op een donker oppervlak, waar diepte meestal afkomstig is van een lichtere rand of een subtiele gloed in plaats daarvan Herdefinieer de tokens binnenin een mediaquery en elk onderdeel volgt
@media (prefers-color-scheme: dark) {
:root {
--shadow-md: 0 1px 2px rgb(0 0 0 / 0.4);
--shadow-lg: 0 8px 24px rgb(0 0 0 / 0.5);
}
}
Genereer elke waarde één keer met de tools hierboven, plak deze in het tokenblok en denk er niet meer over na. Dat is het hele punt van het hebben van een generator: niet om CSS te schrijven, je kon niet met de hand schrijven, maar om te stoppen met het besteden van aandacht aan waarden die slechts één keer hoeven te beslissen.
Waar deze effecten toegankelijkheidsproblemen veroorzaken
Elke eigenschap in deze gids manipuleert contrast, en contrast is het ding dat toegankelijkheidseisen meestal over vier specifieke vallen.
Interactieve componenten hebben zichtbare grenzen nodig. WCAG 2.2 vereist een contrast van 3:1 voor de delen van een besturingselement die het identificeren Een knop waarvan de enige rand een zachte schaduw is, kan dat falen, wat het structurele probleem is met neumorfisme en de reden dat een rand of een stevige focusring daar niet optioneel is.
Glaspanelen erven hun achtergrond's contrastprobleem. Tekst op een mat paneel is leesbaar of niet afhankelijk van de foto erachter, en de foto verandert vaak Test tegen je slechtste afbeelding, niet je held Het verhogen van het paneel's achtergronddekking is meestal een betere oplossing dan het maken van de tekst vet.
Filters veranderen het contrast geruisloos. brightness() en contrast() op een container aangebracht, geldt ook voor de tekst erin. A filter: brightness(1.15) op een kaart om het te laten knallen kan je stilletjes je bodytekst onder de 4.5:1 drempel schuiven Controleer achteraf met de Kleurcontrast checker, niet eerder.
Laat een schaduw niet de enige toestandsindicator zijn. Als zweven, scherpstellen en indrukken alleen verschillen door schaduwdiepte, verliezen toetsenbordgebruikers en iedereen met slecht zicht het onderscheid. Koppel de schaduwverandering aan een transformatie, een omtrek of een kleurverschuiving.
Niets van dit alles maakt de effecten onbruikbaar Het maakt ze dingen te verifiëren in plaats van aan te nemen, wat ongeveer een minuut per component duurt met een contrast checker open.
Sturen deze tools mijn werk ergens heen?
Nee Elke generator draait hier volledig in de browser Er is geen upload stap en geen server round trip, daarom reageren ze direct als je een slider sleept Dat is dezelfde reden dat de rest van de catalogus offline werkt, gedekt in de Gids voor gegevensprivacy.
Veelgemaakte fouten
- Eén schaduw in plaats van twee. Het meest zichtbare verschil tussen een handgeschreven schaduw en een ontworpen schaduw.
- Animeren
box-shadowop zweef. Herschildert elk frame. Animerentransformen kruisverval in plaats daarvan. backdrop-filterover een effen kleur. Niets te vervagen, dus er gebeurt niets.- Ondoorzichtige achtergrond op een glazen paneel. Verbergt het effect dat je net schreef.
- Neumorfisme op een niet-overeenkomende achtergrond. De illusie hangt ervan af of ze identiek zijn.
border-radius: 50%een afgeronde rechthoek verwachten. Op een niet-vierkant element krijg je een ellips.- Verzending van een van deze zonder contrastcontrole. Schaduwen en glas verminderen beide het contrast, en beide zijn gemakkelijk te over-tunen op een goede monitor.
