CSS-skygge-generator
Hvad er CSS-skygge-generator
En CSS-skygge-generator lader dig bygge en box-shadow visuelt og kopiere den præcise CSS. Indstil den vandrette og lodrette forskydning, sløringsradius, spredning og skyggefarven med dens uigennemsigtighed, og se forhåndsvisningen opdatere sig, mens du trækker i hver skyder. Du kan stable flere skygger på det samme element og skifte et vilkårligt lag til indvendig, så outputfeltet altid viser en færdig box-shadow-deklaration klar til at indsætte.
Sådan bruger du det
- Træk i forskydningsskyderne for at flytte skyggen vandret og lodret.
- Indstil sløringsradius for en blød kant og spredningen for at gøre skyggen større eller mindre.
- Vælg skyggefarven, justér uigennemsigtigheden, og slå indvendig til for en skygge på indersiden.
- Tilføj flere lag, hvis du har brug for det, og kopiér den genererede CSS fra outputfeltet.
Hvornår du bør bruge det
Har du brug for en diskret kortskygge, der ser moderne ud i stedet for hård? Sæt forskydningen til 0px og 10px, 20px sløring, ingen spredning og sort farve ved 25% uigennemsigtighed, og kopiér så box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25); direkte ind i dit stylesheet. Lige så praktisk til hover-tilstande på knapper, dybde i lag eller en indvendig skygge, der får et inputfelt til at se trykket ind ud.
Ofte stillede spørgsmål
Hvad betyder værdierne i box-shadow?
I rækkefølge er de den vandrette forskydning, den lodrette forskydning, sløringsradius, spredningen og farven. Positive forskydninger skubber skyggen til højre og ned, sløring blødgør kanten, og spredningen gør hele skyggen større eller mindre, før den bliver sløret.
Hvad gør spredningsværdien?
Spredningen ændrer skyggens størrelse, før der anvendes sløring. En positiv værdi gør skyggen større end elementet, og en negativ trækker den ind, hvilket er nyttigt til stramme skygger, der kun kigger frem på den ene side.
Kan jeg stable mere end én skygge?
Ja. Tilføj så mange lag, du vil, og hvert bliver en kommasepareret skygge i den samme box-shadow-regel. At stable en blød og bred skygge under en strammere og tættere er en almindelig måde at få realistisk dybde på.
Hvad er en indvendig skygge?
En indvendig skygge tegnes inde i elementet i stedet for bag det, så feltet ser trykket ind eller nedsænket ud. Slå indvendig til på et vilkårligt lag for at skifte, hvilket fungerer godt til inputfelter og trykkede knapper.
Kan jeg dele dette værktøj med mine indtastninger udfyldt?
Ja. URL'en opdateres automatisk, mens du justerer skyderne. Kopiér den fra adresselinjen eller brug Del-knappen, og alle, der åbner linket, ser præcis din skygge klar til brug.
Relaterede værktøjer
Billedformat Beregner
Beregn billedformatet, find den manglende bredde eller højde og skift størrelse på billeder og video uden at forvrænge proportionerne. Gratis.
Stregkodegenerator
Generer EAN-13- eller Code 128-stregkoder online. Indtast dit tal eller din tekst, download som SVG eller PNG. Gratis, ingen tilmelding nødvendig.
Base64-dekoder
Dekod Base64-strenge til almindelig tekst direkte i din browser. Understøtter fuldt Unicode-output inklusive emojis. Gratis Base64-dekoder online.