Handytool
UtviklerGratisKjøres lokalt

CSS box-shadow-generator

Design CSS box-shadow-verdier med live forhåndsvisning — forsettinger, uskarphet, spredning, dekningsgrad og inset.

Forhåndsvisning
CSS
box-shadow: 0px 8px 24px -4px rgba(10, 10, 10, 0.18);

Juster skyveregulatorene for å designe skyggen – kopier CSS når det ser riktig ut.

Om CSS box-shadow-generator

Handy tools box-shadow-generator gir deg skyvere for forsetning, uskarphet, spredning, farge og dekningsgrad — og et live forhåndsvisningskort som oppdateres mens du drar. Slå inset-skygger av og på, still inn en farge via velgeren, og kopier den resulterende box-shadow CSS-erklæringen rett inn i stilarket. Hele verktøyet kjøres i nettleseren; ingenting lastes opp.

Funksjoner i CSS box-shadow-generator

  • 01

    Hver parameter som en skyver

    Horisontale og vertikale forsettinger, ukarphetsradius, spredningsradius og dekningsgrad har hver sin skyver pluss numerisk inngang — fin-tune ved dra, så nudge med tastatur for pikselpresisjon.

  • 02

    Inset-skygger støttet

    Flip inset-vekselen for å bytte fra skygge til indre skygge — nyttig for trykknapper, sunken innganger og neumorphic-overflater.

  • 03

    Farge + dekningsgrad, separat

    Velg basisfargen i en hvilken som helst hex-verdi, så juster dekningsgrad uavhengig. Utgangen bruker rgba() slik at fargen og alfa blir lesbar når du kopierer CSS-en.

Vanlige spørsmål om CSS box-shadow-generator

Hva gjør spredningsverdien?
Positiv spredning forstørrer skyggen i alle retninger før ukarpheten brukes; negativ spredning krymper den. Det er nyttig for stramme, definerte glorer når de er kombinert med liten uskarphet.
Kan jeg legge til flere skygger?
Denne generatoren gir ut en enkelt skygge-erklæring. For å lagdele skygger, kopier verdien, så lim den inn to ganger i CSSen din atskilt med komma — box-shadow aksepterer en kommaseparert liste.
Hvorfor er inset-skyggen min usynlig?
Inset-skygger tegnes inne i elementet, så de trenger en bakgrunnsfarge eller utfylling for å være synlig. De vises heller ikke på transparente eller nullstørrelserelementer.
Er forhåndsvisningen piksel-nøyaktig?
Ja — forhåndsvisningen bruker den faktiske CSS box-shadow-egenskapen på et virkelig element, så det du ser er nøyaktig det stilarket vil gjengis.

Guider

Artikler →

Relaterte verktøy

Utvikler →

Utforsk flere verktøy

Alle verktøy →