Skapa CSS-egenskapen box-shadow

Med CSS-skugga kan designers och frontendutvecklare justera ett gränssnitt före implementering. Skapa CSS-egenskapen box-shadow.

Skapa CSS-egenskapen box-shadow. Du kan använda det gratis i webbläsaren utan konto och granska resultatet innan du går vidare.

Så använder du

Ange den horisontella och vertikala förskjutningen för skuggan och sedan värdena för oskärpa och spridning.
Ange färgen i hexadecimalt format, med sex siffror föregångna av ett hash-tecken.
Klicka på generera-knappen för att få den kompletta box-shadow-egenskapen.
Kopiera den skapade regeln och klistra in den i din stilmall för att tillämpa den.
Justera värdena om renderingen inte matchar den önskade effekten.

Exempel

Exempelindata beskriver en förskjuten skugga med oskärpa och en mörk färg. Efter generering visar resultatet motsvarande box-shadow-egenskap. Du kan ändra ett värde i taget för att se hur varje inställning påverkar skuggan.

Indata

Resultat

box-shadow: 2px 2px 8px 1px #000000;

Gränser och format

Verktyget förhandsvisar inte skuggan på ett element; det tillhandahåller bara CSS-koden.
Värden för förskjutning, oskärpa och spridning måste vara numeriska, och förskjutningar kan vara negativa.
Färgen måste vara giltig hexadecimal; en felaktig färg hindrar generering.
Den slutliga renderingen beror på webbläsaren och elementets sammanhang.

Var bearbetningen sker

Allt sker i din webbläsare. Inställningarna du anger stannar på din enhet och laddas aldrig upp eller lagras. CSS-egenskapen byggs lokalt, utan extern anslutning.

Vanliga frågor

Vilka enheter ska jag använda för förskjutningar och oskärpa?

Värden är vanligtvis enhetslösa för förskjutningar och oskärpa, eftersom de representerar pixlar. Du kan också lägga till en enhet som px eller rem. Behåll samma logik för alla värden.

Kan jag använda en transparent färg?

Fältet förväntar sig en hexadecimal färg. För en transparent skugga kan du använda en färg med alfakanal om formatet tillåter det, men det enklaste är att välja en fast färg och justera opaciteten i din CSS.

Varför syns inte min skugga?

Kontrollera att egenskapen tillämpas på ett element med synlig storlek. Ett för litet värde för oskärpa eller spridning kan göra skuggan osynlig. Se också till att färgen inte är identisk med bakgrunden.