Generator gradientów CSS - linear i radial ze stopami, alfą i fallbackiem

To narzędzie składa profesjonalne gradienty CSS z dowolnej liczby stopów koloru. Wybierasz typ linear lub radial, ustawiasz kąt, pozycje w procentach, krycie każdej stop-klatki i decydujesz o trybie legacy z prefiksami. Otrzymujesz gotowy kod background z bezpiecznym fallbackiem oraz podgląd w czasie rzeczywistym.

Jak działa Generator gradientów CSS

Silnik buduje końcową wartość background jako linear-gradient lub radial-gradient. Każdy stop przekształcany jest do postaci rgba(r, g, b, a) X%. Pozycje są zaciskane do 0–100, a następnie sortowane rosnąco, co zapobiega błędom kompozycji. W trybie legacy dokładane są linie z prefiksami -webkit-, -moz- i -o-. Pierwszy kolor gradientu trafia do linii fallback background: #HEX, dzięki czemu użytkownicy bardzo starych przeglądarek nadal zobaczą spójne tło.

Parametry i wpływ na efekt

Presety i szybki dobór barw

W pasku presetów znajdziesz zestaw często używanych barw brandowych oraz neutralnych. Kliknij kolor, aby przypisać go do aktualnie zaznaczonego stopu. To przyspiesza pracę przy prototypowaniu sekcji hero, kart pricingowych i banerów.

Przykłady konfiguracji i wynikowy CSS

1. Gradient liniowy 90 stopni z trzema stopami

/* Fallback do pierwszego koloru */
background: #2A7B9B;
/* Prefiksy legacy opcjonalne */
background: -webkit-linear-gradient(90deg,
  rgba(42, 123, 155, 1) 0%,
  rgba(87, 199, 133, 1) 50%,
  rgba(237, 221, 83, 1) 100%);
background: -moz-linear-gradient(90deg,
  rgba(42, 123, 155, 1) 0%,
  rgba(87, 199, 133, 1) 50%,
  rgba(237, 221, 83, 1) 100%);
/* Nowoczesna linia */
background: linear-gradient(90deg,
  rgba(42, 123, 155, 1) 0%,
  rgba(87, 199, 133, 1) 50%,
  rgba(237, 221, 83, 1) 100%);
  

2. Subtelny radial na tło karty

background: #f8fafc;
background: radial-gradient(circle,
  rgba(99, 102, 241, 0.28) 0%,
  rgba(99, 102, 241, 0.12) 35%,
  rgba(99, 102, 241, 0) 70%);
  

3. Transparentny gradient overlay w sekcji hero

.hero {
  background-image:
    linear-gradient(0deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.2) 35%, rgba(0,0,0,0) 70%),
    url('hero.webp');
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
  

Tablica zastosowań i rekomendacji

Najlepsze praktyki budowania gradientów

• Trzymaj kontrast. Tekst na gradientach wymaga testu czytelności. W razie potrzeby dodaj nakładkę.
• Unikaj bandingu. Dodaj kilka bliskich stopów z niewielką różnicą alfa lub wprowadź lekki szum jako tło dodatkowe.
• Ustal kierunek zgodny z kompozycją. Pochyłe gradienty prowadzą wzrok do CTA.
• Nie mieszaj za wielu kolorów. Dwa lub trzy kolory z kontrolą krycia są zwykle optymalne.
• Stosuj fallback. Linia z pierwszym kolorem to tani gwarant spójności.

Zaawansowane przepisy na przyszłość

Gradient akcentowy na obrysie karty

.card-outline {
  position: relative; border-radius: 16px; background: #0b1020;
}
.card-outline::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(90deg, #0EA5E9, #6366F1, #EC4899);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
  

Gradient w tekście przez background-clip

.text-gradient {
  background: linear-gradient(90deg, #2A7B9B, #57C785, #EDDD53);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
  

Wielowarstwowe tło z patternem i gradientem

.hero-layered {
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0)),
    url('pattern.svg');
  background-size: cover, auto;
  background-repeat: no-repeat, repeat;
}
  

System zmiennych dla brandowych przejść

:root {
  --g-brand: linear-gradient(120deg, #0EA5E9 0%, #3B82F6 50%, #9333EA 100%);
  --g-soft: linear-gradient(180deg, #F8FAFC 0%, #EEF2FF 100%);
}
.btn-brand { background-image: var(--g-brand); color: #fff; }
.card-soft { background-image: var(--g-soft); }
  

Maskowanie gradientem i efekt połysku

.shimmer {
  position: relative; overflow: hidden; background: #111827; color: #fff;
}
.shimmer::after {
  content: ""; position: absolute; inset: -150% -50% auto -50%; height: 300%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
  transform: rotate(15deg); animation: shine 1.7s linear infinite;
}
@keyframes shine { to { transform: translateX(120%) rotate(15deg); } }
@media (prefers-reduced-motion: reduce) { .shimmer::after { animation: none; } }
  

Diagnostyka i szybkie poprawki

• Banding widoczny na dużych płaszczyznach - dodaj stopy z 1–2 procentowymi różnicami lub nałóż subtelną teksturę.
• Tekst słabo czytelny - dołóż overlay 20–40 lub zwiększ kontrast kolorów w strefie pod typografią.
• Zbyt jaskrawe przejście - obniż alfa skrajnych kolorów albo zmiękcz kąty do 90–120.
• Ciężki layout - unikaj kilkunastu gradientów na jednym ekranie. Łącz warstwy tylko tam, gdzie warto.

Jak wpiąć wygenerowany CSS

1. Ustal typ gradientu i dodaj stopy kolorów z pozycjami.
2. Jeśli celem jest hero lub baner, zacznij od 2–3 stopów i kąta 120–150.
3. Kliknij Generate i skopiuj blok background. Fallback zostanie umieszczony automatycznie jako pierwsza linia.
4. Wklej do klasy docelowej i sprawdź czytelność treści. W razie potrzeby dodaj overlay jako osobną warstwę background-image.

FAQ techniczne

Czy kolejność stopów wpływa na wynik

Tak. Stopy są sortowane po pozycji, ale zachowuj logiczny układ. Dwa stopy w tej samej pozycji tworzą ostre przełamanie koloru. Efekt przydatny w paskach postępu i ringach statusu.

Czy radial ma regulację kształtu

W tym generatorze radial to koło. Jeśli potrzebujesz elipsy, możesz po wdrożeniu przepisać deklarację do radial-gradient(ellipse at 50% 50%, ...). Sprawdzi się przy tła glow za avatarami.

Czy gradienty wspierają percent poza 0–100

Specyfikacja pozwala na jednostki inne niż procent, ale interfejs generatora ujednolica zakres do 0–100. Prosty model zapobiega błędom i ułatwia przewidywalność.

Podsumowanie

Generator gradientów CSS przyspiesza tworzenie przejść barwnych w UI. Dodajesz stopy, ustawiasz pozycje, włączasz legacy i kopiujesz gotowy kod. Korzystaj z overlay, zmiennych CSS i wielowarstwowych teł, aby łączyć gradienty z obrazami, patternami i efektami połysku. Dzięki temu uzyskasz nowoczesne, czytelne i wydajne layouty bez prób i błędów.