CodeKitHubChe cos'è questo strumento?
Questo strumento applica un gradiente lineare predefinito a tre tappe per ogni stile metallico, calibrato per sembrare luce che si riflette su una superficie metallica lucida.
Passa tra oro, argento, bronzo e oro rosa usando il selettore di stile, ciascuno con il proprio gradiente, colore del testo e ombra calibrati per quel metallo.
Un'anteprima dal vivo si aggiorna istantaneamente mentre digiti il testo del pulsante, cambi stile o regoli il raggio degli angoli, così puoi vedere esattamente come apparirà prima di copiare il CSS.
Perché usarlo?
- Stai costruendo una pagina prezzi e vuoi che il pulsante "Passa a Premium" si distingua visivamente da quello del piano gratuito sotto — un gradiente oro comunica "premium" più in fretta di un semplice cambio colore.
- Stai progettando un programma fedeltà o membership con livelli Bronzo, Argento e Oro — genera tutti e tre gli stili metallici in una volta così la gerarchia visiva corrisponde ai nomi.
- Un pulsante "Compra ora" o "Aggiungi al carrello" di un e-commerce è attualmente di un colore brand piatto e i test mostrano che si perde nella pagina — un gradiente metallico aggiunge peso visivo senza cambiare il testo.
- Stai creando il mockup di una pagina premi o certificati e ti serve un badge che si legga come oro, argento o bronzo senza aprire un editor di immagini.
- Vuoi un accento oro rosa per abbinarti a una palette brand specifica (beauty, gioielleria, siti di matrimoni) invece del più comune oro giallo a cui puntano di default molti generatori di pulsanti dorati.
- 100% locale: il CSS viene generato interamente nel tuo browser, senza inviare nulla a un server.
Come si usa
- Digita il testo del tuo pulsante.
- Scegli uno stile metallico — oro, argento, bronzo o oro rosa.
- Regola il cursore del raggio del bordo per adattarlo allo stile degli angoli del tuo design.
- Fai clic su "Copia" per copiare il codice CSS generato e incollalo nel tuo foglio di stile.
Esempio
Input
Text: "Buy Now", Style: Gold, Radius: 8Risultato
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;Il CSS generato combina un gradiente metallico a tre tappe, un colore del testo e un'ombra abbinati, e un padding standard da pulsante per un blocco di stile pronto all'uso.
Stili metallici a colpo d'occhio
Ogni stile metallico utilizza un proprio gradiente, colore del testo e colore dell'ombra calibrati appositamente.
| Stile | Tono del gradiente | Colore del testo |
|---|---|---|
| Oro | Giallo dorato caldo, da chiaro a scuro a chiaro | Bruno dorato profondo (#5c3d00) |
| Argento | Grigio chiaro freddo, da chiaro a scuro a chiaro | Grigio scuro (#333333) |
| Bronzo | Bruno rameico caldo, da chiaro a scuro a chiaro | Bruno profondo (#3e2408) |
| Oro Rosa | Rosa tenue, da chiaro a scuro a chiaro | Rosa profondo (#4a1620) |
Strumenti correlati
Per altri generatori CSS, prova questi.
→ Generatore di Testo Neon · Generatore di Testo in Rilievo CSS · Generatore di Border Radius
Abbinare uno stile metallico al tuo caso d'uso
- L'oro si legge come "premium" o "upgrade" quasi universalmente — è la scelta predefinita più sicura per i CTA delle pagine prezzi, i livelli VIP e gli upsell degli abbonamenti.
- L'argento funziona bene come "secondo livello" accanto a un'opzione oro (programmi fedeltà Bronzo/Argento/Oro), oppure da solo per un tono più freddo e corporate rispetto all'oro.
- Il bronzo si adatta a badge di terzo posto, livelli membership entry-level, o qualsiasi design che voglia una sensazione metallica calda senza la connotazione "lusso" più forte dell'oro.
- L'oro rosa si adatta a brand di beauty, gioielleria, matrimoni e lifestyle, dove il più comune oro giallo stonerebbe con una palette già rosa o cipria.
Domande frequenti
Perché il gradiente ha tre tappe di colore invece di due?
Un gradiente a tre tappe (chiaro, scuro, chiaro) imita il modo in cui la luce si riflette su una superficie metallica curva o spazzolata, che appare molto più realistico di una semplice sfumatura a due colori da chiaro a scuro.
Posso usarlo su un link o un div invece che su un elemento pulsante?
Sì — il CSS generato è composto solo dalle proprietà standard background, color, border-radius, box-shadow e text-shadow, quindi funziona su qualsiasi elemento che normalmente stileresti come un pulsante.
Perché il colore del testo è scuro invece che bianco?
Le superfici metalliche come oro e bronzo rendono meglio con un colore del testo scuro e caldo che si abbina alla tonalità del metallo — il testo bianco tende ad apparire piatto e a rompere l'illusione metallica.
Questo strumento salva o traccia ciò che digito?
No. Il CSS viene generato interamente nel tuo browser — nulla viene inviato o memorizzato su un server.
Funzionerà in tutti i browser?
Sì — linear-gradient, box-shadow e text-shadow godono di un ottimo supporto in tutti i browser moderni, inclusi Chrome, Firefox, Safari ed Edge.
Come aggiungo uno stato hover o active al pulsante generato?
Il CSS generato copre solo lo stato predefinito del pulsante. Un approccio comune è aggiungere una regola :hover che scurisca leggermente le tappe del gradiente o aumenti la diffusione del box-shadow, più una transition: all 0.2s ease; sulla classe base così il cambiamento si anima in modo fluido invece di scattare istantaneamente.
Posso cambiare la direzione del gradiente, ad esempio da sinistra a destra invece che dall'alto in basso?
Sì — il linear-gradient(180deg, ...) generato usa 180deg per una lucentezza dall'alto verso il basso, che si legge come la direzione della luce più naturale per un pulsante. Modifica quell'angolo dopo aver copiato il codice (90deg per sinistra-destra, 135deg per una lucentezza diagonale) se il tuo design richiede una direzione della luce diversa, anche se angoli molto piatti possono far sembrare il gradiente a tre tappe più simile a strisce che a una curva metallica.
Perché il mio pulsante appare piatto invece che metallico dopo aver copiato il CSS?
La causa più comune è un'altra regola CSS che sovrascrive una delle proprietà generate, in particolare background o background-color da un reset CSS o da una libreria di componenti, che sostituisce silenziosamente il gradiente con un colore pieno. Controlla gli strumenti per sviluppatori del browser per vedere se la proprietà background appare barrata, a conferma che viene sovrascritta, e aumenta la specificità del selettore o aggiungi !important come ultima risorsa.
Posso combinare lo stile del pulsante dorato con il Generatore di Testo in Rilievo CSS di questo sito?
Sì — puntano a proprietà diverse, quindi non c'è conflitto. Genera qui lo sfondo, il bordo e il box-shadow del pulsante, poi sostituisci il valore text-shadow con uno in rilievo del Generatore di Testo in Rilievo per l'etichetta del pulsante se vuoi che anche il testo appaia sollevato o inciso invece di usare il text-shadow piatto predefinito di questo strumento.
Il cursore del raggio degli angoli influisce su qualcos'altro oltre alla forma del pulsante?
No — imposta solo il valore border-radius; il gradiente, l'ombra e il colore del testo non sono influenzati indipendentemente da quanto siano arrotondati o squadrati gli angoli. Angoli più netti (raggio vicino a 0) tendono a leggersi come più formali o corporate, mentre una forma a pillola completamente arrotondata si adatta spesso meglio a contesti giocosi o e-commerce.