Softonic

Generator gradientu siatkowego

Utwórz płynne, wielokolorowe tło z 4, 6 lub 9 ruchomych punktów. Wybierz kolor każdego punktu, przeciągnij go po obszarze roboczym, wypróbuj starannie dobraną losową paletę i wyeksportuj efekt jako SVG lub PNG. Możesz też skopiować przybliżenie CSS z nałożonych gradientów radialnych. Projekt pozostaje w tej karcie przeglądarki podczas pracy.

Jak utworzyć gradient o wyglądzie siatki

  1. 1

    Wybierz układ

    Zacznij od 4, 6 lub 9 punktów kontrolnych. Więcej punktów pozwala utworzyć więcej obszarów koloru.

  2. 2

    Wybierz kolory

    Użyj próbnika przy każdym punkcie. Edytor przechowuje sześciocyfrowe kolory HEX.

  3. 3

    Przesuń punkty

    Przeciągnij punkt, wpisz jego położenie poziome i pionowe lub użyj klawiszy strzałek.

  4. 4

    Wybierz rozmiar

    Wybierz format poziomy, panoramiczny lub kwadratowy dla plików SVG i PNG.

  5. 5

    Wyeksportuj projekt

    Pobierz PNG lub SVG albo skopiuj przybliżenie CSS z gradientów radialnych.

Jak powstają trzy formaty

  • PNG używa tego samego mieszania kolorów według odległości co podgląd. Przy innych proporcjach te same względne punkty zostaną dopasowane do nowych wymiarów.
  • SVG nakłada gradienty radialne w tych samych punktach kontrolnych i zachowuje ostrość przy skalowaniu.
  • CSS tworzy dla każdego punktu warstwę radial-gradient() nad kolorem bazowym, bez osobnego pliku obrazu.

SVG i CSS korzystają z tych samych danych projektu, ale są lekkimi przybliżeniami wyglądu siatki. Ich piksele nie będą identyczne z podglądem PNG.

Wskazówki dotyczące palety

  • Pokrewne odcienie zwykle tworzą łagodne przejścia.
  • Kontrastowe odcienie mocniej zaznaczają granice między obszarami.
  • Losowe palety są punktem wyjścia, a nie gwarancją czytelności.
  • Sprawdź kontrast tekstu, ikon i elementów sterujących na gotowym tle.

Ustawianie punktów

Przeciągnij numerowany punkt na podglądzie albo ustaw na nim fokus i użyj strzałek. Przytrzymaj Shift, aby przesuwać go o pięć punktów procentowych. Pola poziome i pionowe pozwalają także wpisać dokładną pozycję.

Punkty mogą dotrzeć do krawędzi. Zgrupowanie kilku skupia ich kolory w jednym miejscu, a większe odstępy dają każdemu kolorowi więcej przestrzeni.

Typowe zastosowania

  • Tła sekcji otwierających i separatory.
  • Grafiki do mediów społecznościowych i miniatury filmów.
  • Tła prezentacji i ilustracji.
  • Ekrany startowe i panele dekoracyjne.

PNG najwierniej odpowiada podglądowi. Wybierz SVG do skalowania bez utraty ostrości lub CSS, gdy potrzebujesz edytowalnego tła bez pliku obrazu.

Prywatność i pamięć przeglądarki

Kolory, pozycje i rozdzielczość pozostają w pamięci przeglądarki oraz w sessionStorage. Nie są dodawane do adresów lejka ani stanu naszych serwerów. Narzędzie może odnotować wykonanie eksportu, ale bez wartości projektu.

Projekt można przywrócić z sessionStorage przez maksymalnie sześć godzin, dopóki bieżąca karta jest otwarta. Zamknięcie karty zwykle usuwa go wcześniej, dlatego pobierz lub skopiuj wszystko, co chcesz zachować.

Najczęściej zadawane pytania

Używają różnych metod renderowania. PNG miesza piksele według odległości, a SVG i CSS nakładają gradienty radialne. Kolory i pozycje są wspólne, lecz piksele nie są identyczne.

Tak. Przeciągnij punkt, użyj pól pozycji albo ustaw na nim fokus i naciśnij strzałki. Przytrzymaj Shift, aby wykonywać większe kroki.

Edytor zapisuje sześciocyfrowe kolory HEX. Użyj próbnika albo najpierw przelicz RGB lub HSL na HEX.

Nie. Skopiowany CSS przybliża efekt przez nakładanie standardowych gradientów radialnych.

Można go przywrócić z sessionStorage przez maksymalnie sześć godzin w bieżącej karcie. Zamknięcie karty zwykle usuwa go wcześniej. Projekt nie trafia do naszych serwerów ani do adresów lejka.

Powiązane narzędzia

Referencja znaków HTML

Przeszukiwalna lista encji HTML wraz z ich kodami nazwanymi i liczbowymi oraz kopiowaniem jednym kliknięciem specjalnych znaków i symboli.

Tabela ASCII

Pełna tabela ASCII od 0 do 127 z zapisem dziesiętnym, szesnastkowym, ósemkowym i binarnym oraz notacją numerycznych odwołań HTML, w tym kodami sterującymi NUL, LF i DEL.

Konwerter ASCII na binarny

Konwertuj dowolny ciąg ASCII na reprezentację binarną. Każdy znak staje się ośmioma bitami, rozdzielonymi spacjami, gotowymi do wklejenia w ślad protokołu albo zadanie domowe.

Generator losowych liter

Generuj losowe litery A-Z. Wybierz liczbę, wielkie litery, małe litery lub zapis mieszany i użyj wyniku w grach, zadaniach lub lekcjach.

Generator losowych kolorów

Wygeneruj od 1 do 50 losowych kolorów HEX z próbkami do podglądu, kopiowania i użycia w CSS, testach lub tworzeniu palet.

Próbnik kolorów HEX

Wybierz lub wpisz kolor HEX i sprawdź RGB, HSL, przybliżone CMYK, luminancję względną oraz kontrast z bielą i czernią.