Generator tekstu z gradientem CSS
Twórz style tekstu z gradientem i korzystaj z podglądu na żywo oraz możliwości kopiowania CSS.
To narzędzie przetwarza wszystkie dane lokalnie na Twoim urządzeniu.
Wejście
Gradient
deg
Typografia
px
Wyjście
Podgląd
100%
Kod CSS
Instrukcja
Jak działa gradient tekstu w CSS?
CSS nie ma właściwości „gradient tekstu”. Typowym rozwiązaniem jest ustawienie gradientu jako tła elementu, przycięcie tego tła do kształtu liter za pomocą background-clip: text i ustawienie przezroczystego wypełnienia tekstu, aby gradient był widoczny.
Opis narzędzia
Wpisz tekst, wybierz kolor początkowy i końcowy, ustaw kąt, a narzędzie wyświetli podgląd na żywo i udostępni CSS do skopiowania. Możesz też zmienić rodzinę, grubość i rozmiar czcionki, aby podgląd odpowiadał temu, czego użyjesz na swojej stronie.
Wygenerowana reguła wygląda tak:
.gradient-text {
background-image: linear-gradient(135deg, #f97316 0%, #0ea5e9 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}Wynik zawiera również ustawienia czcionki i reguły zawijania tekstu.
Funkcje
- Liniowy gradient z dwoma kolorami i kątem od 0 do 360 stopni
- Ustawienia rodziny, grubości i rozmiaru czcionki
- Podgląd na żywo, który możesz wyeksportować jako obraz, oraz CSS gotowy do wklejenia
Komentarze
Informacje o narzędziu
Utworzono
Ostatnia aktualizacja
Tagi
cssgradienttextgeneratortext gradienttypographybackground clipcolordesignstylewebfrontend
Podobne narzędzia
Generuj kolory dopełniające rozdzielone na podstawie dowolnego koloru: dwa lub więcej odcieni równomiernie rozmieszczonych wokół jego dopełnienia na kole barw. Dostosuj liczbę kolorów i kąt rozstawienia.
Generuj natywne polecenie bash lub zsh, które wysyła magiczny pakiet Wake on LAN z systemu Linux. Wykorzystuje Python 3, Perl lub bash /dev/udp, więc nie musisz instalować programów wakeonlan ani etherwake.
Przeciągaj cztery narożniki zdjęcia, aby nadać mu perspektywę 3D lub dopasować je do szyldu, ekranu czy ściany. Precyzyjne obliczenia perspektywy, pobieranie w pełnym rozmiarze, działa w przeglądarce.
Osadź
Osadź to narzędzie gdziekolwiek za darmo. Potrzebujesz pomocy? Sprawdź nasz przewodnik.
Zastrzeżenie
Narzędzia udostępnione na tej stronie internetowej zostały zaprojektowane, aby pomagać użytkownikom w rozwiązywaniu różnych problemów. Choć staramy się zapewnić, że narzędzia są dokładne i skuteczne, nie gwarantujemy ani nie zapewniamy, że wynik żadnego z nich będzie w 100 % dokładny lub wolny od błędów. Wyniki generowane przez te narzędzia są dostarczane w stanie takim, jakim są i powinny być używane ostrożnie. Zalecamy, aby użytkownicy weryfikowali wszelkie istotne informacje lub wyniki przy pomocy dodatkowych źródeł lub profesjonalnej porady, ponieważ nie możemy ponosić odpowiedzialności za konsekwencje wynikające z korzystania z tych narzędzi. Korzystając z tej strony, zgadzasz się przyjąć wszystkie ryzyka związane z dokładnością i użyciem dostarczonych wyników.