Box Shadow-generator

Dra i reglagen för att forma en box-shadow, stapla lager för djup och kopiera den färdiga CSS-koden direkt.

Skugglager
Lager 1
CSS
Justera reglagen för att forma din skugga.

Varje skugga renderas i din webbläsare. Inget av det du ställer in här laddas upp till BroBroGo.

Vanliga frågor

Vad styr egentligen offset, blur och spread?

Offset flyttar skuggan i sidled och höjdled, blur gör dess kanter mjukare, och spread gör den större eller mindre innan den blir oskarp. En negativ spread drar in skuggan, vilket är användbart för en tät, nära skugga.

Vad gör alternativet inset?

En vanlig skugga hamnar utanför elementet, som ljus bakom ett upphöjt kort. Inset vänder den inåt istället, så att elementet ser nedsänkt ut – praktiskt för nedsänkta inmatningsfält eller nedtryckta knappar.

Varför ska man stapla flera skugglager?

En enskild skugga ser platt ut efter en viss storlek. Verkligt djup kombinerar oftast en snäv, mörk skugga med en mjuk, bredare skugga – lägg till ett andra lager och finjustera dem oberoende av varandra för att få den effekten.

CSS Cubic Bezier-generatorDra i de två handtagen för att forma en övergångskurva, se en punkt följa den bredvid en linjär rörelse och kopiera cubic-bezier()-värdet.Gradient-generatorBygg en linjär, radiell eller konisk toning, lägg till färgstopp och ställ in riktningen, och kopiera sedan CSS-koden med ett klick.Border Radius-generatorRunda varje hörn med reglage, skapa organiska former med det elliptiska läget och kopiera din CSS direkt.Flexbox-generatorSkapa en flex-container och dess objekt med visuella kontroller, se layouten reagera direkt och kopiera CSS-koden med ett klick.CSS Grid-generatorStäll in kolumner och rader, dra över cellerna för att placera ut objekt och kopiera CSS-koden med matchande HTML med ett klick.CSS clamp()-kalkylatorAnge en storlek för små och stora skärmar och få ett flytande clamp()-värde som skalas mjukt däremellan – för textstorlekar, padding, marginaler eller gap.FärgkonverterareKonvertera färger mellan HEX, RGB, HSL, HSV, CMYK och LAB – ändra valfritt fält så uppdateras resten automatiskt.CSS-formaterare & minifierareStrukturera rörig CSS för att göra den läsbar, eller minifiera den inför driftsättning – med ett säkert läge som aldrig ändrar ordningen på dina regler.KontrastkontrollAnge en text- och bakgrundsfärg för att se WCAG-kontrastförhållandet och vilka AA- och AAA-nivåer som blir godkända.