Viktigste punkter
- 01Hver box-shadow parameter har sin egen glider pluss et numerisk inngangsfelt for piksel-presisjon tuning.
- 02Inset veksle bytter mellom drop shadow og indre shadow for presset eller neumorphic effekter.
- 03Farge og opacity kontrolleres separat, utgangspunkt rgba() for lesbar CSS.
- 04Forhåndsvisningen bruker ekte CSS-egenskapen på ekte element — det du ser er nøyaktig hva stylesheeteen gjengjør.
Hvorfor bruker du en visuell Box-Shadow Generator
CSS box-shadow tar opptil seks verdier — horisontalt offset, vertikalt offset, blur radius, spread radius, farge og valgfritt inset nøkkelord. Å skrive dem fra minne fungerer for enkle skygger, men for noe mer nyanser — en stram glow, en dyp drop shadow, en myk elevasjonslag — gjetter du og laster på nytt til noe ser riktig.
En visuell generator kollapser den iterasjons-løkken. Flytt en glider, se endringen øyeblikkelig, og kopier bare når du er fornøyd. Handytool's box-shadow generator kjører helt i nettleseren, så forhåndsvisningen er det virkelige CSS-egenskapen brukt på ekte element — ingen gjengjør forskjeller mellom verktøyet og den faktiske siden.
Slik designer du en Box Shadow
- 01
Juster de horisontale og vertikale offsetene
Positive verdier flytter skyggen høyre og ned. Negative verdier flytter det venstre og opp. En sentrert skygge (0, 0) skaper en glow effekt.
- 02
Sett blur radiusen
Høyere blur verdier skaper mykere, mer diffus skygger. Null blur produserer en hard, solid skygge konturer.
- 03
Juster spread radiusen
Positive spread forstørrer skyggen før blurring. Negative spread krymper det, noe som er nyttig for stramme under-element skygger.
- 04
Velg en farge og opacity
Bruk farvevalget for å velge skyggetone, og deretter slå ned opacity for subtilitet. Utgangspunktet bruker rgba() for å holde verdiene lesbar.
- 05
Veksle inset hvis nødvendig
Inset bytter fra drop shadow til indre skygge — nyttig for pressede knapper, nesenket innganger og neumorphic overflater.
- 06
Kopier CSS-erklæringen
Klikk Kopier for å gripe hele box-shadow verdien og lime den inn i stylesheeteen.
Ingen opplasting, ingen konto
Generatoren er helt client-side. Fargevalg, numeriske verdier og forhåndsvisningsstater holder seg i nettleseren — ingenting sendes til en server. Det er ingen konto å opprette og ingen bruksgrense.
Fordi forhåndsvisnings-element bruker ekte CSS box-shadow egenskapen, er utgangspunktet nøyaktig per definisjon — det er ingen canvas gjengjøring eller skjermshot tilnærming involvert. Pixel verdiene du kopierer er pixel verdiene nettleseren bruker.
Box-Shadow Generator FAQ
Hva gjør spread verdien?
Positiv spread forstørrer skyggen i alle retninger før blur brukes; negativ spread krymper det. Nyttig for stramme, definert glows når parret med lav blur.
Kan jeg legge til flere box shadows?
Denne generatoren utgangspunkt en skygge om gangen. For å lag dem, kopier verdien og separat flere skygger med kommaer i CSS — box-shadow godtar en komma-separert liste.
Hvorfor er min inset-skygge usynlig?
Inset skygger trekk inne i element, så de trenger en bakgrunnsfarge eller synlig padding for å vise. De vises ikke på transparente eller null-størrede element.
Er forhåndsvisningen pixel-nøyaktig?
Ja — forhåndsvisningen bruker den virkelige CSS box-shadow egenskapen på ekte DOM element, så det du ser er nøyaktig hva stylesheeteen vil produsere.
Hva er en neumorphic skygge?
Neumorphism bruker to skygger — en lys og en mørkere — offset i motsatte retninger for å gjøre et element se ut hevet eller presset fra en flat overflate. Begge skygger er typisk inset for den pressede varianten.