Przejdź do treści
patrache.tools

Generator gradientów

Darmowy generator gradientów CSS online. Liniowe i radialne, regulacja kierunku, kolorów, punktów stopu. Kopiowanie kodu. Przetwarzane w przeglądarce.

Typ
Kąt
90°
Kolory
0%
100%
Kod CSS
background: linear-gradient(90deg, #2563eb 0%, #7c3aed 100%);
lockPliki nie są wysyłane na żaden serwer
Udostępnij
Osadź

Osadź to narzędzie na swojej stronie

Darmowy generator gradientów CSS online. Wizualnie projektuj gradienty liniowe, radialne i stożkowe, a następnie natychmiast skopiuj kod CSS.

Jak używać Generator gradientów?

  1. Wybierz typ gradientu (liniowy, radialny itd.).
  2. Dodaj punkty kolorów i ustaw kolory.
  3. Skopiuj wygenerowany kod CSS.

Najczęściej zadawane pytania o Generator gradientów

Jakie typy gradientów są obsługiwane?

Obsługiwane są gradienty liniowe, radialne i stożkowe.

Czy mogę skopiować kod CSS bezpośrednio?

Tak, jednym kliknięciem skopiuj wygenerowany kod gradientu CSS, aby zastosować go bezpośrednio na swojej stronie.

Dlaczego pośrodku gradientu pojawia się brudnoszary pas?

Gdy dwa kolory leżą naprzeciw siebie na kole barw, przejście mija punkt, w którym nasycenie spada niemal do zera, i to właśnie widać jako matowy szary pas. Zwykłymi winowajcami są pary niebieski-pomarańczowy i czerwony-zielony. Dodanie trzeciego koloru jako przystanku pośredniego prowadzi gradient wokół szarości, a wybór dwóch sąsiednich odcieni usuwa problem od razu.

Czy mogę zapisać gradient jako plik graficzny, a nie tylko jako CSS?

Tak, możesz pobrać PNG i użyć go wprost jako tła slajdu, grafiki do mediów społecznościowych albo elementu składu do druku. Na stronie internetowej lepszy jest jednak sam CSS: nie ma pliku do pobrania, gradient rozciąga się na dowolny rozmiar ekranu bez zniekształceń i nigdy nie pokazuje schodków typowych dla powiększonej bitmapy.

Wskazówki dotyczące efektywnego korzystania z Generator gradientów

  • Łącz dwa odcienie leżące blisko na kole barw; przeciwstawne dają brudną szarość pośrodku.
  • Przekątna 135 stopni to najbezpieczniejszy wybór dla banerów i teł kart.
  • Jeśli na wierzchu stanie tekst, sprawdź kontrast wobec najjaśniejszego punktu gradientu.

Powered by Patrache Studio Tools

Zezwól na reklamy w tej witrynie

Aby korzystać z tych narzędzi, zezwól na reklamy w tej witrynie. Reklamy pozwalają utrzymać bezpłatny dostęp do usługi.

Otwórz bloker reklam, wyłącz go dla tej witryny i sprawdź ponownie.