Preview

Wygenerowany kod CSS

background: linear-gradient(135deg, #4F46E5, #8B5CF6);

Elementy sterujące gradientem

135°
0%
100%

Popularne ustawienia wstępne

Przykłady gradientów

Zapoznaj się z tymi oszałamiającymi przykładami gradientów i zainspiruj się do swojego następnego projektu. Kliknij dowolny gradient, aby załadować go do generatora.

Rumieniec o zachodzie słońca

Ciepły gradient inspirowany pięknymi zachodami słońca.

Oceaniczna bryza

Spokojne nachylenie przywodzące na myśl przybrzeżne wody.

Miętowa fuzja

Świeży i nowoczesny gradient łączący miętę i błękit nieba.

Bujny ogród

Żywy gradient reprezentujący piękno natury.

Kosmiczny sen

Magiczny gradient inspirowany nocnym niebem.

Złota godzina

Ciepły gradient oddający istotę zmierzchu.

Dokumentacja gradientu

Co to są gradienty CSS?

Gradienty CSS umożliwiają wyświetlanie płynnych przejść między dwoma lub więcej kolorami. Mogą być używane jako tło dla elementów i występują w trzech różnych typach:

  • Gradienty liniowe:Kolory przejścia wzdłuż linii prostej.
  • Gradienty radialne:Kolory przejścia od punktu środkowego na zewnątrz.
  • Gradienty stożkowe:Kolory przejścia wokół punktu środkowego w okręgu.

Jak korzystać z gradientów

Po wygenerowaniu gradientu za pomocą naszego narzędzia możesz użyć kodu CSS w swoich projektach:

  1. Skopiuj kod CSS z generatora.
  2. Wklej go do pliku CSS lub użyj go w tekście w elementach HTML.
  3. Zastosuj gradient do dowolnego elementu za pomocą przyciskubackground property.
.my-element {
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}

  • Użyj więcej niż dwóch kolorów, aby uzyskać bardziej złożony efekt gradientu.
  • Dostosuj położenie kolorów, aby kontrolować, gdzie występują przejścia.
  • Połącz wiele gradientów, aby uzyskać jeszcze bardziej kreatywne efekty.
  • W przypadku gradientów stożkowych zmiana środka tworzy ciekawe wzory.
  • Zapisz swoje ulubione gradienty do późniejszego wykorzystania.

Obsługa przeglądarek

Gradienty CSS są powszechnie obsługiwane w nowoczesnych przeglądarkach. Jednak starsze przeglądarki, takie jak Internet Explorer, mogą nie renderować ich poprawnie. Zawsze podawaj kolor zastępczy:

.my-element {
background: #4F46E5; /* Fallback color */
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}

Chrome

26+

Firefox

16+

Safari

6.1+

Edge

12+

O tym narzędziu

Nasz generator gradientów CSS został zaprojektowany, aby pomóc programistom i projektantom w tworzeniu pięknych gradientów bez wysiłku. Niezależnie od tego, czy pracujesz nad stroną internetową, aplikacją, czy po prostu chcesz poeksperymentować z kolorami, to narzędzie ułatwia wygenerowanie idealnego gradientu dla Twojego projektu.

Features

Łatwy w użyciu

Intuicyjny interfejs do tworzenia gradientów.

Responsywny projekt

Działa doskonale na wszystkich rozmiarach ekranu.

Gotowy do kopiowania i wklejania

Uzyskaj natychmiastowy czysty kod CSS.

Dostępne ustawienia wstępne

Zacznij od pięknych, predefiniowanych gradientów.

Related Tools

Upiększacz CSS

Formatuj i upiększaj swój kod CSS z profesjonalną precyzją

Generator przejść CSS3

Płynne przejście krycia

Minifikator CSS

Kompresuj i optymalizuj swój kod CSS z profesjonalną precyzją

Walidator JSON

Weryfikuj, formatuj i debuguj dane JSON z precyzją. Otrzymuj natychmiastowe informacje zwrotne na temat błędów składniowych i problemów z formatowaniem.

Generator trójkątów CSS

Dostosuj swój trójkąt za pomocą poniższych opcji i natychmiast uzyskaj wygenerowany kod CSS.

Dziesiętny na Ósemkowy

Konwertuj liczby dziesiętne na ósemkowe bez wysiłku