CSS-gradiënten en box shadows maken

Zo gebruik je CSS-gradiënt- en schaduwgenerator

1. 1

   Kies verloop of boxschaduw

   Schakel met de tabs boven het voorbeeld tussen de twee editors.

2. 2

   Begin met een voorinstelling

   Klik op een voorinstelling om die te laden, of houd de standaardinstelling aan en pas die aan.

3. 3

   Pas het visueel aan

   Sleep kleurstops en stel de hoek in, of voeg schaduwlagen toe en stem verschuiving, vervaging en uitbreiding af.

4. 4

   Kopieer de code

   Kopieer de CSS-declaratie of de Tailwind-klasse en plak die in je project.

Over CSS-gradiënt- en schaduwgenerator

Verlopen en schaduwen zijn de twee CSS-effecten die het vaakst al proberend worden bijgesteld in de dev tools van de browser. Deze generator geeft elk van beide een visuele editor met een groot live voorbeeld en schrijft daarna de exacte CSS-declaratie en een passende Tailwind-klasse met willekeurige waarde, zoals bg-[linear-gradient(135deg,#ff7e5f_0%,#feb47b_100%)], zodat je het resultaat direct in een stylesheet of className plakt.

Met de verloopeditor maak je lineaire, radiale en conische verlopen. Klik op de kleurbalk om een kleur toe te voegen op de plek waar je klikt, sleep een kleurstop om die te verplaatsen of gebruik de pijltjestoetsen voor exacte posities, en geef elke stop zijn eigen dekking. Lineaire en conische verlopen hebben een hoek, radiale en conische verlopen een middelpunt, radiale verlopen een cirkel of ellips, en elk verloop kan herhalend zijn voor strepen en ringen. Je kiest ook de kleurruimte voor de kleurmenging: OKLab en OKLCH voorkomen het grijze, modderige midden dat klassieke sRGB-menging geeft tussen verzadigde kleuren en worden door alle actuele browsers ondersteund.

In de boxschaduw-editor stapel je zoveel lagen als je nodig hebt. Elke laag heeft X- en Y-verschuiving, vervaging, uitbreiding, kleur met dekking, een inset-schakelaar en een zichtbaarheidsknop, en je kunt lagen herordenen, omdat de eerste bovenaan wordt getekend. Een voorbeeldbox met instelbare grootte, hoekafronding en kleuren toont het effect op een lichte of donkere ondergrond.

Twaalf voorinstellingen per editor – zonsondergangen, kleurenwielen en strepen; Material-hoogtes, gelaagde zachte schaduwen, neumorfisme en harde verschuivingen – geven je een beginpunt. De tool dekt alleen verlopen en boxschaduwen; text-shadow, filter: drop-shadow en SVG-verlopen worden niet gegenereerd.

Functies

CSS-gradiënt- en schaduwgenerator: veelgestelde vragen