CSS Skygge Generator
Design box-shadow og text-shadow effekter visuelt med skydelister og live forhåndsvisning. Juster vandret/lodret offset, sløring, spredning, farve og gennemsigtighed — kopiér derefter den klar-til-brug CSS-kode.
Boks Skygge
H Offset4px
V Offset4px
Sløring12px
Spredning0px
FarveGennemsigtighed:0.2
Indvendig
box-shadow: 4px 4px 12px 0px rgba(0,0,0,0.2);
Tekst Skygge
H Offset2px
V Offset2px
Sløring4px
FarveGennemsigtighed:0.4
AnyText
text-shadow: 2px 2px 4px rgba(0,0,0,0.4);
Sådan Bruger Du CSS Skygge Generatoren
- Boks Skygge: Træk skydelister for H/V offset, sløring og spredning. Vælg en farve og gennemsigtighed. Markér "Indvendig" for en indre skygge.
- Tekst Skygge: Juster skydelister i Tekst Skygge sektionen (ingen spredning eller indvendig for text-shadow).
- Live forhåndsvisning opdateres øjeblikkeligt når du trækker. Klik "Kopiér CSS" for at kopiere den genererede kode.
Funktioner
- Visuelle skydelister for offset, sløring, spredning, farve og gennemsigtighed
- Live forhåndsvisning på skakbrætsbaggrund for kontrast
- Indvendig skyggemulighed for box-shadow
- Genererer RGBA-farve for præcis gennemsigtighedsstyring
- Ét-klik CSS-kopiering for både boks- og tekstskygge
- Separate kontrolpaneler for box-shadow og text-shadow
Css shadow generator: praktisk brug
Brug css shadow generator, nar du har brug for et hurtigt, klart og privat resultat uden at oprette en konto. Siden daekker ogsa relaterede behov som css shadow generator online, css shadow generator validator, css shadow generator formatter, sa du kan vaelge den rigtige arbejdsgang.
Hvornar det er nyttigt
- Bedst til: Indsaette kode, strukturerede data, tokens, hashes eller kodet tekst og fa et laesbart resultat hurtigt.
- Nyttige detaljer: Brug eksempler, valideringsbeskeder, kopieringshandlinger og formatering til at fange fejl tidligt.
- Naeste trin: Aben en relateret formatter, validator, encoder, parser eller konverter, nar arbejdsgangen skifter format.
Fortsæt eventuelt med JSON Formatter og Validator, Online Regex Tester, Base64 Encoder og Decoder, Hash Generator.
Ofte Stillede Spørgsmål
Hvad er "Spredning" i box-shadow?
Spredning udvider eller trækker skyggen ud over sløreradius. Positiv spredning gør skyggen større end elementet; negativ spredning gør den mindre og strammere, hvilket skaber en mere realistisk dybdeeffekt.
Hvad gør "Indvendig"?
Når markeret renderes box-shadow inde i elementet i stedet for udenfor. Dette skaber et indtrykket eller præget udseende, bruges almindeligvis til forsænkede inputfelter eller trykkede knapper.
Kan text-shadow bruge spredning eller indvendig?
Nej. CSS text-shadow egenskaben accepterer kun vandret offset, lodret offset og sløreradius. Spredning og indvendig er kun gyldige for box-shadow.
