Viktiga punkter
- 01Varje box-shadow-parameter har sin egen skjutreglage plus en numerisk inmatning för pixel-precision-justering.
- 02Inset-växel byter mellan drop shadow och inner shadow för pressade eller neumorfiska effekter.
- 03Färg och opacitet kontrolleras separat, outputta rgba() för läsbar CSS.
- 04Förhandsgranskningen använder den verkliga CSS-egenskapen på ett verkligt element — vad du ser är exakt vad din stilmall renderar.
Varför man använder en visuell Box-Shadow Generator
CSS box-shadow tar upp till sex värden — horisontell förskjutning, vertikal förskjutning, suddignings-radie, spridnings-radie, färg och ett valfritt inset nyckelord. Att skriva dem från minnet fungerar för enkla skuggor, men för något mer nyanserat — en snäv glöd, en djup drop shadow, ett mjukt höjdsskikt — du gissar och laddar om tills något ser rätt ut.
En visuell generator kollapsar den iterationen loop. Flytta en skjutreglage, se förändring omedelbar och kopiera bara när du är nöjd. Handytool's box-shadow generator körs helt i din webbläsare, så förhandsgranskningen är den verkliga CSS-egenskapen tillämpad på ett verkligt element — inga renderingskillnader mellan verktyget och din faktiska sida.
Hur man designar en Box Shadow
- 01
Justera de horisontella och vertikala förskjutningarna
Positiva värden flyttar skuggan höger och ner. Negativa värden flyttar det vänster och upp. En centrerad skugga (0, 0) skapar en glöd-effekt.
- 02
Ställ in suddignings-radie
Högre suddignings-värden skapar mjukare, mer diffus skuggor. Noll suddignings producerar en hard, solid skugga-konturer.
- 03
Justera spridnings-radie
Positiv spridning förstorar skuggan innan suddigness. Negativ spridning krymper den, vilket är användbar för snäva under-element skuggor.
- 04
Välj en färg och opacitet
Använd färgväljaren för att välja skuggans nyans, sedan slå ner opaciteten för subtilitet. Utmatningen använder rgba() för att hålla värdena läsbara.
- 05
Slå på inset vid behov
Inset byter från en drop shadow till en inner shadow — användbar för pressade knappar, sjunkna inmatningar och neumorfiska ytor.
- 06
Kopiera CSS-deklarationen
Klicka Kopiera för att få det fullständiga box-shadow-värdet och klistra in det i din stilmall.
Ingen uppladdning, inget konto
Generatorn är helt client-side. Dina färgval, numeriska värden och förhandsgrannings-tillståndet stanna i din webbläsare — ingenting skickas till en server. Det finns inget konto att skapa och ingen användningsgräns.
Eftersom förhandsgranskningen-elementet använder den faktiska CSS box-shadow-egenskapen är utmatningen korrekt genom definition — det finns ingen canvas-rendering eller screenshot approximation inblandad. De pixel-värdena du kopierar är de pixel-värdena webbläsaren tillämpar.
Box-Shadow Generator FAQ
Vad gör spridnings-värdet?
Positiv spridning förstorar skuggan i alla riktningar före suddigness tillämpas; negativ spridning krymper den. Användbar för snäva, definierade glöder när parad med låg suddigness.
Kan jag lägga till flera box shadows?
Denna generator matar ut en skugga åt gången. För att lagra dem, kopiera värdet och separera flera skuggor med komman i din CSS — box-shadow accepterar en kommaseparerad lista.
Varför är min inset skugga osynlig?
Inset skuggor ritning inuti elementet, så de behöver en bakgrundsfärg eller synlig padding för att visa. De visas inte på transparenta eller noll-storlek element.
Är förhandsgranskningen pixel-korrekt?
Ja — förhandsgranskningen använder den faktiska CSS box-shadow-egenskapen på ett verkligt DOM-element, så vad du ser är exakt vad din stilmall kommer att producera.
Vad är en neumorfisk skugga?
Neumorfism använder två skuggor — en ljus och en mörk — förskjutet i motsatta riktningar för att göra ett element visas höjt eller pressat från en plan yta. Båda skuggorna är typiskt inset för den pressade varianten.