Vigtigste punkter
- 01Hver box-shadow parameter har sin egen skydera plus en numerisk input til pixel-præcision tuning.
- 02Inset toggle skifter mellem drop shadow og inner shadow til trykkede eller neumorphic effekter.
- 03Farve og opacity styres separat, der outputtes rgba() til læsbar CSS.
- 04Forhåndsvisningen bruger den rigtige CSS-egenskab på et rigtigt element — hvad du ser er præcist hvad dit stylesheet gengiver.
Hvorfor bruger en visuelt Box-Shadow Generator
CSS box-shadow tager op til seks værdier — vandret offset, lodret offset, blur radius, spread radius, farve og et valgfrit inset søgeord. At skrive dem fra hukommelse fungerer til simple skygger, men til noget mere nuanceret — en tight glow, en dyb drop shadow, en blød elevation lag — gætter du og indlæser, indtil noget ser rigtigt ud.
En visuelt generator kollapserer denne iterations-løkke. Flyt en skydera, se ændringen øjeblikkeligt og kopier kun, når du er tilfreds. Handytool's box-shadow generator kører helt i din browser, så forhåndsvisningen er den rigtige CSS-egenskab påført et rigtigt element — ingen gengivel-forskelle mellem værktøjet og din aktuelle side.
Sådan designer du en Box Shadow
- 01
Juster de vandrette og lodrette offsets
Positive værdier flytter skyggen højre og ned. Negative værdier flytter det venstre og op. En centreret skygge (0, 0) skaber en glow-effekt.
- 02
Indstil blur radius
Højere blur-værdier skaber blødere, mere diffuse skygger. Nul blur producerer en hard, solid skygge-omrids.
- 03
Juster spread radius
Positiv spread forstørrer skyggen før blurring. Negativ spread krymper den, hvilket er nyttig for tight under-element skygger.
- 04
Vælg en farve og opacity
Brug farvepickeren til at vælge skygge-tone, derefter drejer ned opacity til subtilitet. Output bruger rgba() til at holde værdierne læsbare.
- 05
Skift inset, hvis nødvendig
Inset skifter fra en drop shadow til en inner shadow — nyttig til trykkede knapper, sunken inputs og neumorphic flader.
- 06
Kopier CSS-deklarationen
Klik Copy for at få den hele box-shadow værdi og indsæt den i dit stylesheet.
Ingen Upload, Ingen Konto
Generatoren er helt klientside. Dine farvevalg, numeriske værdier og forhåndsvisnings-tilstande forbliver i din browser — intet sendes til en server. Der er ingen konto at oprette og ingen brugsgræns.
Fordi forhåndsvisnings-elementet bruger den faktiske CSS box-shadow egenskab, er output nøjagtig per definition — der er ingen canvas-gengivel eller screenshot-tilnærmelse involveret. De pixel-værdier, du kopierer, er de pixel-værdier, browseren anvender.
Box-Shadow Generator Ofte Stillede Spørgsmål
Hvad gør spread-værdien?
Positiv spread forstørrer skyggen i alle retninger før blur påføres; negativ spread krymper den. Nyttig til tight, definerede glows, når parret med low blur.
Kan jeg tilføje flere box shadows?
Denne generator udsender en skygge ad gangen. For at lagre dem skal du kopiere værdien og adskille flere skygger med kommaer i din CSS — box-shadow accepterer en komma-separeret liste.
Hvorfor er min inset skygge usynlig?
Inset skygger tegner inde i elementet, så de skal bruge en baggrunddsfarve eller synlig padding til at vise. De vises ikke på transparent eller nul-størrelse elementer.
Er forhåndsvisningen pixel-nøjagtig?
Ja — forhåndsvisningen bruger den faktiske CSS box-shadow egenskab på et rigtigt DOM-element, så hvad du ser er præcist hvad dit stylesheet vil producere.
Hvad er en neumorphic skygge?
Neumorphism bruger to skygger — en lys og en mørk — offset i modsatte retninger for at gøre et element ser rejst eller trykt fra en flad flade. Begge skygger er typisk inset for den trykkede variant.