Przejdź do głównej treści
LibraTool logoLibraTool

Generator gradientów CSS za darmo

Twórz liniowe, radialne i stożkowe gradienty CSS z podglądem na żywo. Kopiuj CSS jednym kliknięciem.

Działa offline po wczytaniu
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);

Unika szarych punktów środkowych między bardzo różnymi kolorami. Dodaje zwykły wiersz sRGB jako zapasowy dla starszych przeglądarek.

0%
100%

Szablony

Typowe zastosowania

  • Stwórz Gradienty dla Sekcji HeroZaprojektuj tła gradientu na całej stronie dla sekcji hero strony i stron docelowych.
  • Stwórz Przyciski Gradientu i CTAZaprojektuj przyciągające tła przycisków gradientowych dla wezwań do działania, które się wyróżniają.
  • Stwórz Tła Gradientu dla KartZaprojektuj wypełnienia gradientu dla kart, modalów, pasków bocznych i teł komponentów interfejsu użytkownika.
  • Stwórz Gradienty do Grafiki Mediów SpołecznychZaprojektuj żywe tła gradientu dla postów Instagram, miniatur YouTube i kart Twitter.
  • Stwórz Skale Kolorów do WykresówGeneruj skale kolorów gradientu dla map cieplnych, pasków postępu i wizualizacji danych.

Jak to działa

Generator gradientów buduje ciągi gradientów CSS bezpośrednio w przeglądarce — bez biblioteki, serwera i przesyłania. Ręcznie napisana funkcja składa na żywo poprawną składnię linear-gradient, radial-gradient lub conic-gradient z punktów kolorów i kąta, a następnie formatuje wynik dla wybranego celu.

  1. 1
    Skonfiguruj punkty i kierunek
    Ustawiasz od 2 do 6 punktów kolorów natywnym selektorem kolorów przeglądarki, a następnie umieszczasz każdy z nich na osi 0–100% suwakiem. Dla gradientów liniowych i stożkowych wybierasz też kąt (0–360°); dla radialnych wybierasz kształt (elipsa lub koło) i słowo kluczowe rozmiaru określające zasięg gradientu.
  2. 2
    buildCss składa ciąg gradientu
    Przy każdej zmianie lokalna funkcja buildCss łączy parametry w poprawne wywołanie funkcji CSS — np. linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). Nie jest używana żadna biblioteka; ciąg powstaje ze zwykłej logiki szablonów JavaScript, łączony bezpośrednio z tablicy punktów.
  3. 3
    Podgląd na żywo przez styl inline
    Złożony ciąg gradientu jest stosowany bezpośrednio do elementu div jako styl inline tła, więc podgląd renderuje własny silnik CSS przeglądarki. Bez canvas i obrazów — widzisz dosłownie zastosowaną właściwość CSS.
  4. 4
    Gotowy do skopiowania wynik w czterech formatach
    Wybór formatu zamienia ten sam ciąg gradientu na zwykły CSS (background: ...), blok CSS z jednolitym kolorem zapasowym, klasę Tailwind z dowolną wartością lub deklarację zmiennej SCSS. Kliknięcie Kopiuj zapisuje wybrany wynik do schowka przez navigator.clipboard.writeText. Bieżący gradient jest też kodowany w hashu URL, więc możesz go zapisać w zakładkach lub udostępnić.

Powiązane narzędzia

🟦

Generator siatki CSS

Wizualnie zaprojektuj siatkę CSS — ścieżki, jednostki i przerwy — i skopiuj wygenerowany CSS i HTML.

Wypróbuj
↔️

Generator flexbox CSS

Eksperymentuj z kierunkiem flex, zawijaniem, justify i align na elementach na żywo — i skopiuj CSS.

Wypróbuj
🧮

Kalkulator Macierzy

Dodawaj, odejmuj, mnóż, transponuj, odwracaj i redukuj macierze, a także oblicz wyznacznik, rząd, wartości własne i rozwiąż Ax = b — do 8×8, z kopiowaniem jednym dotknięciem. Bezpłatnie i prywatnie.

Wypróbuj

Często zadawane pytania