CSS Gouden Knop Generator — Metallic Goud, Zilver & Brons Knoppen

Een metallic knop heeft een gradient nodig die licht vangt van boven naar beneden, niet gewoon een egale kleur. Met deze tool typ je je knoptekst, kies je een metaalstijl — Goud, Zilver, Brons, of Rosé Goud — pas je de hoekradius aan, en genereert de tool direct de CSS-code met een live preview.

Wat is deze tool?

Deze tool past een vooraf ingestelde lineaire gradient met drie kleurstops toe voor elke metaalstijl, afgestemd om eruit te zien als licht dat reflecteert op een gepolijst metalen oppervlak.

Wissel tussen Goud, Zilver, Brons, en Rosé Goud met de stijlselector, elk met zijn eigen gradient, tekstkleur, en schaduw afgestemd op dat metaal.

Een live preview wordt direct bijgewerkt terwijl je je knoptekst typt, van stijl wisselt, of de hoekradius aanpast, zodat je precies ziet hoe het eruit zal zien voordat je de CSS kopieert.

Waarom gebruiken?

Je bouwt een prijzenpagina en wilt dat de knop "Upgrade naar Premium" visueel opvalt tegenover de gratis-tier knop eronder — een gouden gradient signaleert "premium" sneller dan een kleurwissel alleen.
Je ontwerpt een loyaliteits- of lidmaatschapsprogramma met Brons, Zilver, en Goud niveaus — genereer alle drie de metaalstijlen in één sessie zodat de visuele hiërarchie overeenkomt met de naamgeving.
Een "Nu Kopen" of "Toevoegen aan Winkelwagen" knop in een webshop is momenteel een egale merkkleur en tests tonen dat hij verloren gaat op de pagina — een metallic gradient voegt visueel gewicht toe zonder de tekst te veranderen.
Je maakt een mockup van een prijzen- of certificatenpagina en hebt een badge nodig die als goud, zilver, of brons overkomt zonder een beeldbewerker te openen.
Je wilt een rosé gouden accent om aan te sluiten bij een specifiek merkpalet (beauty, sieraden, trouwwebsites) in plaats van de gebruikelijkere geelgouden look waar de meeste gouden-knop generators standaard naar overhellen.
100% lokaal: de CSS wordt volledig in je browser gegenereerd, er wordt niets naar een server gestuurd.

Hoe te gebruiken

Typ je knoptekst.
Kies een metaalstijl — Goud, Zilver, Brons, of Rosé Goud.
Pas de rand-radiusschuif aan om overeen te komen met de hoekstijl van je ontwerp.
Klik op "Kopieer" om de gegenereerde CSS-code te kopiëren en plak hem in je stylesheet.

Voorbeeld

Invoer

Tekst: "Nu Kopen", Stijl: Goud, Radius: 8

Uitvoer

background: linear-gradient(180deg, #f9e28c 0%, #d4a017 50%, #f9e28c 100%);
color: #5c3d00;
border: none;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(212,160,23,0.5);
text-shadow: 0 1px 0 rgba(255,255,255,0.4);
padding: 12px 32px;
font-weight: 600;
cursor: pointer;

De gegenereerde CSS combineert een metallic gradient met drie kleurstops, een bijpassende tekstkleur en schaduw, en standaard knop-padding voor een direct bruikbaar stijlblok.

Metaalstijlen in één oogopslag

Elke metaalstijl gebruikt zijn eigen afgestemde gradient, tekstkleur, en schaduwkleur.

Stijl	Gradienttoon	Tekstkleur
Goud	Warm geelgoud, licht naar donker naar licht	Diep bruingoud (#5c3d00)
Zilver	Koel lichtgrijs, licht naar donker naar licht	Donkergrijs (#333333)
Brons	Warm koperbruin, licht naar donker naar licht	Diepbruin (#3e2408)
Rosé Goud	Zacht rozeblush, licht naar donker naar licht	Diepe roos (#4a1620)

Een metaalstijl matchen met jouw toepassing

Goud oogt vrijwel universeel als "premium" of "upgrade" — het is de veiligste standaardkeuze voor CTA's op prijzenpagina's, VIP-niveaus, en abonnement-upsells.
Zilver werkt goed als "tweede niveau" naast een gouden optie (Brons/Zilver/Goud loyaliteitsprogramma's), of op zichzelf voor een koelere, meer zakelijke toon dan goud biedt.
Brons past bij derde-plaats badges, instapniveau-lidmaatschappen, of elk ontwerp dat een warme metallic uitstraling wil zonder de sterkere "luxe"-connotatie van goud.
Rosé Goud past bij beauty-, sieraden-, trouw-, en lifestylemerken waar de gebruikelijkere geelgouden look zou botsen met een al roze of blush kleurenpalet.

Gerelateerde tools

Voor meer CSS-generators, probeer deze.

→ Neon Tekst Generator · CSS Reliëftekst Generator · Border Radius Generator

Veelgestelde vragen

Waarom heeft de gradient drie kleurstops in plaats van twee?

Een gradient met drie stops (licht, donker, licht) bootst na hoe licht reflecteert op een gebogen of geborsteld metalen oppervlak, wat er veel realistischer uitziet dan een simpele overgang van licht naar donker met twee kleuren.

Kan ik dit gebruiken op een link of div in plaats van een knop-element?

Ja — de gegenereerde CSS bestaat gewoon uit standaard background-, color-, border-radius-, box-shadow-, en text-shadow-eigenschappen, dus het werkt op elk element dat je normaal als knop zou stylen.

Waarom is de tekstkleur donker in plaats van wit?

Metaaloppervlakken zoals goud en brons ogen het best met een donkere, warme tekstkleur die past bij de tint van het metaal — witte tekst oogt vaak plat en breekt de metallic illusie.

Bewaart of volgt deze tool wat ik typ?

Nee. De CSS wordt volledig in je browser gegenereerd — er wordt niets naar een server gestuurd of opgeslagen.

Werkt dit in alle browsers?

Ja — linear-gradient, box-shadow, en text-shadow worden allemaal uitstekend ondersteund in alle moderne browsers, waaronder Chrome, Firefox, Safari, en Edge.

Hoe voeg ik een hover- of active-status toe aan de gegenereerde knop?

De gegenereerde CSS dekt alleen de standaardstatus van de knop. Een gangbare aanpak is een :hover-regel toevoegen die de gradientstops iets donkerder maakt of de box-shadow-spreiding vergroot, plus een transition: all 0.2s ease; op de basisklasse zodat de verandering soepel animeert in plaats van abrupt te wisselen.

Kan ik de gradientrichting veranderen, bijvoorbeeld van links naar rechts in plaats van boven naar beneden?

Ja — de gegenereerde linear-gradient(180deg, ...) gebruikt 180deg voor een glans van boven naar beneden, wat overkomt als de meest natuurlijke lichtrichting voor een knop. Bewerk die hoek na het kopiëren (90deg voor links-naar-rechts, 135deg voor een diagonale glans) als je ontwerp een andere lichtrichting vraagt, al kunnen erg ondiepe hoeken de gradient met drie stops meer op strepen laten lijken dan op een metallic kromming.

Waarom oogt mijn knop plat in plaats van metallic nadat ik de CSS heb gekopieerd?

De meest voorkomende oorzaak is een andere CSS-regel die één van de gegenereerde eigenschappen overschrijft, met name background of background-color uit een CSS-reset of componentenbibliotheek, die de gradient stilletjes vervangt door een egale kleur. Controleer je browser dev tools op een doorgestreepte background-eigenschap om te bevestigen dat hij wordt overschreven, en verhoog de specificiteit van de selector of voeg als laatste redmiddel !important toe.

Kan ik de gouden knopstijl combineren met de CSS Reliëftekst Generator op deze site?

Ja — ze richten zich op verschillende eigenschappen, dus er is geen conflict. Genereer hier de achtergrond, rand, en box-shadow van de knop, en wissel dan een reliëf text-shadow-waarde van de Reliëftekst Generator in voor het knoplabel als je wilt dat de tekst zelf ook verhoogd of gegraveerd oogt in plaats van de standaard platte text-shadow van deze tool.

Beïnvloedt de hoekradiusschuif nog iets anders dan de vorm van de knop?

Nee — het stelt alleen de border-radius-waarde in; de gradient, schaduw, en tekstkleur blijven ongewijzigd ongeacht hoe afgerond of hoekig de hoeken zijn. Scherpere hoeken (radius bij 0) ogen doorgaans formeler of zakelijker, terwijl een volledig afgeronde pilvorm vaak beter past bij speelse of e-commercecontexten.