CSS Box Shadow Generator

Gratis online CSS box shadow-generator med liveförhandsvisning. Justera förskjutning, oskärpa, spridning, färg och opacitet med interaktiva reglage.

Shadow List
4px
4px
10px
0px
50%
Generated CSS

Så här fungerar det

  1. Öppna generatorn och se direkt en live-förhandsgranskning av box-skuggan.
  2. Dra reglagen för horisontell och vertikal förskjutning för att placera skuggan.
  3. Justera oskärperadien och spridningen för att styra skuggans mjukhet och storlek.
  4. Välj färg och genomskinlighet som passar ditt design.
  5. Kopiera den genererade CSS-koden och klistra in den direkt i ditt stylesheet.

Exempel

Indata: Horisontell: 5px, Vertikal: 10px, Oskärpa: 15px, Spridning: 2px, Färg: #666666, Genomskinlighet: 0.5
Resultat: box-shadow: 5px 10px 15px 2px rgba(102, 102, 102, 0.5);

Vanliga frågor

Ja, CSS Box Shadow Generator är helt gratis och kräver ingen registrering eller ett konto.

Dina uppgifter är helt säkra. All bearbetning sker på klientsidan i din webbläsare. Inga uppgifter skickas till någon server.

Ja, CSS stöder flera box-shadow-värden separerade med kommatecken för att skapa skiktade skuggeffekter.

Ja, egenskapen box-shadow stöds av alla moderna webbläsare utan behov av leverantörsprefix.