CodeKitHubCzym jest to narzędzie?
To narzędzie stosuje predefiniowany, trzypunktowy gradient liniowy dla każdego stylu metalu, dostrojony tak, aby wyglądał jak światło odbijające się od wypolerowanej powierzchni metalu.
Przełączaj między Złotem, Srebrem, Brązem i Różowym złotem za pomocą selektora stylu — każdy z własnym gradientem, kolorem tekstu i cieniem dopasowanym do danego metalu.
Podgląd na żywo aktualizuje się natychmiast podczas wpisywania tekstu przycisku, zmiany stylu lub dostosowywania promienia narożnika, dzięki czemu widzisz dokładnie, jak będzie wyglądał przycisk, zanim skopiujesz kod CSS.
Dlaczego warto go używać?
- Budujesz stronę z cennikiem i chcesz, żeby przycisk "Przejdź na Premium" wizualnie odróżniał się od przycisku darmowego planu poniżej — złoty gradient sygnalizuje "premium" szybciej niż sama zmiana koloru.
- Projektujesz program lojalnościowy albo członkostwo z poziomami Brąz, Srebro i Złoto — wygeneruj wszystkie trzy style metalu za jednym razem, żeby hierarchia wizualna odpowiadała nazewnictwu.
- Przycisk "Kup teraz" albo "Dodaj do koszyka" w sklepie internetowym jest obecnie w płaskim kolorze marki, a testy pokazują, że ginie na stronie — metaliczny gradient dodaje wizualnej wagi bez zmiany treści.
- Tworzysz makietę strony z nagrodami lub certyfikatami i potrzebujesz odznaki, która czyta się jako złota, srebrna lub brązowa, bez otwierania edytora obrazów.
- Chcesz akcent w kolorze różowego złota, pasujący do konkretnej palety marki (uroda, biżuteria, strony ślubne), zamiast bardziej powszechnego żółtego złota, na które domyślnie stawia większość generatorów złotych przycisków.
- 100% lokalnie: CSS jest generowany w całości w Twojej przeglądarce, bez wysyłania czegokolwiek na serwer.
Jak używać
- Wpisz tekst przycisku.
- Wybierz styl metalu — Złoto, Srebro, Brąz lub Różowe złoto.
- Dostosuj suwak border radius, aby dopasować go do stylu narożników w Twoim projekcie.
- Kliknij „Copy”, aby skopiować wygenerowany kod CSS i wklej go do swojego arkusza stylów.
Przykład
Wejście
Text: "Buy Now", Style: Gold, Radius: 8Wynik
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;Wygenerowany CSS łączy trzypunktowy metaliczny gradient, dopasowany kolor tekstu i cień oraz standardowy padding przycisku, tworząc gotowy do użycia blok stylu.
Style metalu w skrócie
Każdy styl metalu korzysta z własnego, dopracowanego gradientu, koloru tekstu i koloru cienia.
| Styl | Ton Gradientu | Kolor Tekstu |
|---|---|---|
| Złoto | Ciepły żółto-złoty, jasny do ciemnego do jasnego | Głęboki brązowo-złoty (#5c3d00) |
| Srebro | Chłodny jasnoszary, jasny do ciemnego do jasnego | Ciemnoszary (#333333) |
| Brąz | Ciepły miedziano-brązowy, jasny do ciemnego do jasnego | Głęboki brąz (#3e2408) |
| Różowe złoto | Delikatny róż, jasny do ciemnego do jasnego | Głęboki róż (#4a1620) |
Powiązane narzędzia
Więcej generatorów CSS znajdziesz poniżej.
→ Neon Text Generator · CSS Emboss Text Generator · Border Radius Generator
Dopasowanie stylu metalu do zastosowania
- Złoto niemal uniwersalnie czyta się jako "premium" albo "upgrade" — to najbezpieczniejszy domyślny wybór dla CTA na stronach z cennikiem, poziomów VIP i upsellu subskrypcji.
- Srebro dobrze sprawdza się jako "drugi poziom" obok opcji złotej (programy lojalnościowe Brąz/Srebro/Złoto), albo samodzielnie dla chłodniejszego, bardziej korporacyjnego tonu niż złoto.
- Brąz pasuje do odznak trzeciego miejsca, poziomów członkostwa podstawowego lub dowolnego projektu, który chce ciepłego, metalicznego klimatu bez silniejszej konotacji "luksusu" jaką ma złoto.
- Różowe złoto pasuje do marek z branży urody, biżuterii, ślubnej i lifestyle'owej, gdzie bardziej powszechne żółte złoto kłóciłoby się z już różową lub pudrową paletą kolorów.
Najczęściej zadawane pytania
Dlaczego gradient ma trzy punkty koloru zamiast dwóch?
Trzypunktowy gradient (jasny, ciemny, jasny) naśladuje sposób, w jaki światło odbija się od zakrzywionej lub szczotkowanej powierzchni metalu, co wygląda znacznie bardziej realistycznie niż prosty dwukolorowy przejście od jasnego do ciemnego.
Czy mogę użyć tego na linku lub div zamiast elementu button?
Tak — wygenerowany CSS to po prostu standardowe właściwości background, color, border-radius, box-shadow i text-shadow, więc działa na dowolnym elemencie, który normalnie stylizujesz jako przycisk.
Dlaczego kolor tekstu jest ciemny, a nie biały?
Metaliczne powierzchnie, takie jak złoto i brąz, najlepiej prezentują się z ciemnym, ciepłym kolorem tekstu dopasowanym do odcienia metalu — biały tekst ma tendencję do wyglądania płasko i niszczy metaliczną iluzję.
Czy to narzędzie zapisuje lub śledzi to, co wpisuję?
Nie. CSS jest generowany w całości w Twojej przeglądarce — nic nie jest wysyłane ani przechowywane na serwerze.
Czy będzie to działać we wszystkich przeglądarkach?
Tak — linear-gradient, box-shadow i text-shadow mają doskonałe wsparcie we wszystkich nowoczesnych przeglądarkach, w tym Chrome, Firefox, Safari i Edge.
Jak dodać stan hover lub active do wygenerowanego przycisku?
Wygenerowany CSS obejmuje tylko domyślny stan przycisku. Popularne podejście to dodanie reguły :hover, która lekko przyciemnia punkty gradientu albo zwiększa rozrzut box-shadow, plus transition: all 0.2s ease; na klasie bazowej, żeby zmiana animowała się płynnie zamiast pojawiać się natychmiast.
Czy mogę zmienić kierunek gradientu, np. z lewej do prawej zamiast z góry na dół?
Tak — wygenerowany linear-gradient(180deg, ...) używa 180deg dla połysku od góry do dołu, co czyta się jako najbardziej naturalny kierunek światła dla przycisku. Zmień ten kąt po skopiowaniu (90deg dla lewo-prawo, 135deg dla ukośnego połysku), jeśli Twój projekt wymaga innego kierunku światła, choć bardzo płaskie kąty mogą sprawić, że trzypunktowy gradient będzie wyglądał bardziej jak paski niż metaliczna krzywizna.
Dlaczego mój przycisk wygląda płasko zamiast metalicznie po skopiowaniu CSS?
Najczęstszą przyczyną jest inna reguła CSS nadpisująca jedną z wygenerowanych właściwości, zwłaszcza background lub background-color z resetu CSS albo biblioteki komponentów, która po cichu zastępuje gradient jednolitym kolorem. Sprawdź narzędzia deweloperskie przeglądarki pod kątem przekreślonej właściwości background, żeby potwierdzić, że jest nadpisywana, i zwiększ specyficzność selektora albo dodaj !important jako ostateczność.
Czy mogę połączyć styl złotego przycisku z generatorem wypukłego tekstu CSS na tej stronie?
Tak — dotyczą różnych właściwości, więc nie ma konfliktu. Wygeneruj tutaj tło, obramowanie i box-shadow przycisku, a następnie podmień wartość text-shadow na wypukłą z generatora wypukłego tekstu dla etykiety przycisku, jeśli chcesz, żeby sam tekst też wyglądał na uniesiony lub wygrawerowany, zamiast używać domyślnego, płaskiego text-shadow tego narzędzia.
Czy suwak promienia narożnika wpływa na coś poza kształtem przycisku?
Nie — ustawia tylko wartość border-radius; gradient, cień i kolor tekstu pozostają bez zmian niezależnie od tego, jak zaokrąglone lub kwadratowe są narożniki. Ostrzejsze narożniki (promień bliski 0) zwykle czytają się jako bardziej formalne lub korporacyjne, podczas gdy w pełni zaokrąglony kształt pigułki często lepiej pasuje do żartobliwych lub e-commerce'owych kontekstów.