Box Shadow Generator

Sleep schuifregelaars om een box-shadow te maken, stapel lagen voor extra diepte en kopieer direct de voltooide CSS.

Schaduwlagen
Laag 1
CSS
Pas de schuifregelaars aan om je schaduw vorm te geven.

Elke schaduw wordt in je browser gerenderd. Niets van wat je hier instelt, wordt geüpload naar BroBroGo.

Veelgestelde vragen

Wat bepalen offset, blur en spread precies?

De offset verplaatst de schaduw naar links/rechts en omhoog/omlaag, blur verzacht de randen, en spread vergroot of verkleint de schaduw vóór het vervagen. Een negatieve spread trekt de schaduw naar binnen, wat handig is voor een compacte, subtiele schaduw.

Wat doet de optie 'inset'?

Een normale schaduw valt buiten het element, zoals licht achter een zwevende kaart. Inset draait dit om naar de binnenkant, waardoor het element ingedrukt lijkt — handig voor verzonken invoervelden of ingedrukte knoppen.

Waarom zou ik meerdere schaduwlagen stapelen?

Een enkele schaduw ziet er vanaf een bepaalde grootte al snel plat uit. Echte diepte combineert meestal een scherpe, donkere schaduw met een zachte, bredere schaduw — voeg een tweede laag toe en stel ze onafhankelijk van elkaar in om dat effect te bereiken.

CSS Cubic Bezier GeneratorSleep de twee hendels om een easingcurve te ontwerpen, zie hoe een stip de curve volgt ten opzichte van een constante snelheid en kopieer de cubic-bezier()-waarde.Gradient GeneratorOntwerp een lineair, radiaal of conisch verloop, voeg kleurstops toe, bepaal de richting en kopieer direct de CSS.Border Radius GeneratorRond elke hoek af met schuifregelaars, maak organische blobs met de elliptische modus en kopieer direct de CSS.Flexbox GeneratorStel een flex-container en de bijbehorende items in met visuele knoppen, zie de lay-out direct reageren en kopieer de CSS met één klik.CSS Grid GeneratorStel je kolommen en rijen in, sleep over de cellen om items te plaatsen en kopieer met één klik de grid-CSS met bijbehorende HTML.CSS clamp() CalculatorVoer een grootte in voor kleine en grote schermen en krijg een vloeiende clamp()-waarde die er prachtig tussenin schaalt — voor lettergroottes, padding, marges of gaps.KleurconverterConverteer kleuren tussen HEX, RGB, HSL, HSV, CMYK en LAB — bewerk een veld en de rest verandert direct mee.CSS Beautifier & MinifierLijn rommelige CSS opnieuw uit om het te lezen, of minificeer het voor productie — met een veilige modus die de volgorde van je regels nooit verandert.Contrast CheckerVoer een tekst- en achtergrondkleur in om de WCAG-contrastverhouding te zien en te controleren welke AA- en AAA-niveaus worden behaald.