CSS Box Shadow-generator

CSS box-shadow-egenskapen lägger till skuggeffekter på element, vilket skapar djup och visuell hierarki. Skuggor kan anpassas med horisontella/vertikala förskjutningar, oskärpe- och spridningsradier, färg med opacitet och ett inset-alternativ. Flera skugglager kan kombineras för komplexa effekter. Detta verktyg tillhandahåller en visuell redigerare med förhandsgranskning i realtid.

Bläddra bland alla Generator-verktyg

Hur du använder

Justera reglagen för horisontell förskjutning, vertikal förskjutning, oskärperadie och spridningsradie. Välj en skuggfärg och aktivera inset vid behov. Lägg till flera skugglager med knappen "Lägg till skugga" för komplexa effekter. Förhandsgranskningen uppdateras i realtid. Kopiera den genererade CSS:en med ett klick.

Vanliga användningsområden

• •Lägga till subtila skuggor på kort och containrar för djup
• •Skapa neumorfiska (soft UI) designeffekter
• •Designa upphöjda knapp- och flytande elementstilar
• •Bygga fokusringsalternativ för tillgänglighet
• •Generera komplexa flerlagers skuggeffekter för modernt UI

Ta en paus och spela gratis webbläsarspel