CSS-boksskyggegenerator — Gratis Online Værktøj

Hvad er CSS-boksskyggegenerator?

Gratis online CSS-boksskyggegenerator. Justér offset, sløring, spredning og farve med visuelle kontroller, generér CSS-kode øjeblikkeligt.

CSS-egenskaben box-shadow er et af de mest alsidige værktøjer i en webdesigners værktøjskasse og kan tilføje dybde, hierarki og visuel interesse til UI-elementer. CSS Box Shadow Generator leverer en visuel grænseflade til at oprette box-shadow-CSS-kode med fuld kontrol over hver parameter og en interaktiv forhåndsvisning, der opdateres i realtid.

Generatoren eksponerer fem justerbare parametre via skydere. X Offset flytter skyggen vandret (positive værdier skifter til højre, negative til venstre). Y Offset flytter skyggen lodret (positive værdier skifter nedad, negative opad). Blur Radius styrer, hvor bløde skyggekanterne er — nul producerer en skarp skygge, mens højere værdier skaber en blødere, mere diffus effekt. Spread Radius udvider eller trækker skyggestørrelsen sammen uden at påvirke uskarpheden. Farvevælgeren angiver skyggefarven med opacitetskontrol via alfa-kanalen.

Et live-forhåndsvisningskort viser effekten af enhver justering øjeblikkeligt. Forhåndsvisningskortet er stylede med en hvid baggrund og afrundede hjørner for at simulere en ægte UI-komponent, så du kan se præcis, hvordan skyggen vil se ud på dine faktiske grænsefladeelementer. Seks forudindstillede skygger er inkluderet til hurtig udvælgelse: subtle, medium, heavy, blurry, inset og lifted.

Den genererede CSS box-shadow-kode vises i et kopiér-klar format. Outputtet understøtter den fulde shorthand-syntaks inklusive inset-nøgleordet til indre skygger. Flere box-shadow-værdier kan kombineres ved at kopiere outputtet og manuelt indsætte flere erklæringer. Værktøjet validerer også, at syntaksen er korrekt, så hver kopi er en gyldig CSS-erklæring.

Praktiske anvendelser af CSS-boksskyggegenerator

Oprettelse af en subtil kortskygge til et dashboard-UI

Dit dashboard har kort, der viser målinger og diagrammer. Brug generatoren til at sætte X=0, Y=2, Blur=4, Spread=0 med en lys grå farve ved 10% opacitet. Den resulterende skygge skaber subtil dybde på kortene. Kopiér den genererede CSS og anvend den på din kortkomponentklasse.

Design af en løftet knapeffekt til en landingsside

En call-to-action-knap har brug for et løftet udseende. Sæt X=0, Y=4, Blur=6, Spread=-1 med en mørkere skyggefarve. Slå inset-muligheden fra. Resultatet er en knap, der ser ud til at svæve over siden. Klik på forudindstillingen "Lifted" som udgangspunkt og finjustér værdierne.

Oprettelse af en inset-skygge til en søgeinputs fokustilstand

Et søgeinputfelt har brug for en indre glød, når det er fokuseret. Slå Inset-muligheden til. Sæt X=0, Y=2, Blur=4, Spread=0 med den primære brandfarve ved 30% opacitet. Inset-skyggen vises inde i inputkanten og signalerer fokus til brugeren.

Hvorfor bruge CSS-boksskyggegenerator?

Skyggegenerator med 6 forudindstillinger inkluderet
Flere skyggelag for rigere effekter
Forhåndsvisning i realtid på testboksen

Sådan bruger du CSS-boksskyggegenerator — Trin for trin

Juster X-offset, Y-offset, slør og spredning med skydeknapper.

Vælg skyggefarve og opacitet.

Tilføj flere skyggelag for rigere effekter.

Kopier den genererede CSS-kode.

Hvem er CSS-boksskyggegenerator bedst til?

UI-design
kort
knapper

Pro-tips til CSS-boksskyggegenerator

1Rækkefølgen af værdier i box-shadow-shorthand er: X-offset Y-offset blur-radius spread-radius color. Inset skal komme først eller sidst. Generatoren outputter automatisk korrekt syntaks.
2Lagdelte skygger skaber mere realistisk dybde. Brug to skygger: en subtil offset-skygge til hoveddybden og en større, blødere skygge med lavere opacitet til omgivende lys. Eksempel: box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 10px 20px rgba(0,0,0,0.08).
3Undgå at bruge box-shadow på meget store elementer (fuldside-containere). Gengivelsesomkostningen for store skygger kan påvirke scroll-ydelsen, især på mobile enheder.
4Spread-parameteren med en negativ værdi skaber en skygge, der er mindre end elementet. Kombineret med blur giver det en "vignette"-effekt, hvor skyggen koncentreres omkring kanterne.

CSS-boksskyggegenerator — Ofte stillede spørgsmål

What is CSS box-shadow?

box-shadow is a CSS property that adds shadow effects around an element. It accepts X offset, Y offset, blur radius, spread radius, color, and an optional inset keyword.

Can I apply multiple shadows?

Yes, separate multiple shadows with commas: box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08);

Will the generated CSS work in all browsers?

The CSS generators produce W3C-standard code that works in Chrome, Firefox, Safari, and Edge. Vendor prefixes are included where needed for older browser versions.

Can I copy the generated code directly?

Yes. Each generator provides a copy button that places the code on your clipboard. The code is ready to paste into your project — no cleanup or modification needed.

Is CSS-boksskyggegenerator really free to use?

Yes, CSS-boksskyggegenerator is completely free with no hidden charges, no usage limits, and no premium tiers. You can use it as often as you need without signing up or providing any personal information.

Klar til at bruge CSS-boksskyggegenerator?

Gratis onlineværktøj — fungerer i din browser, ingen tilmelding nødvendig. Start med at bruge det nu.

Prøv det nu