Gradient kolorów to stopniowe połączenie dwóch lub więcej kolorów. Zwykle gradient jest definiowany przez dwa kolory zdefiniowane przez użytkownika, a komputer automatycznie oblicza wszystkie kolory pomiędzy nimi. Gradienty kolorów mogą składać się z dwóch lub więcej zdefiniowanych kolorów. W kodzie CSS dla stron internetowych można zdefiniować gradienty liniowe i promieniowe. Liniowy gradient kolorów łączy kolory w linii prostej i powoduje progresywne przejście kolorów z jednego punktu do drugiego. Promieniowy gradient kolorów miesza kolory w okrągły sposób i powoduje przejście kolorów, które promieniuje z określonego punktu.
Zwykle projektant wybiera ręcznie dwa lub więcej kolorów, aby uzyskać gradient kolorów. Wymaga to doświadczenia w projektowaniu i dobrego wyczucia harmonii kolorów. Nasz generator gradientów kolorów wykorzystuje algorytmy gradientów kolorów naszego twórcy logo My Brand New Logo, który automatycznie tworzy dobrze wyglądające i dobrze zrównoważone gradienty kolorów. Musisz tylko wybrać jeden kolor, a nasz generator gradientów automatycznie generuje na jego podstawie ładnie wyglądający gradient. Za kulisami dzieje się wiele badań nad kolorami, ale możesz mieć pewność, że gradient kolorów zawsze wygląda dobrze.
Nasz generator gradientu tła CSS automatycznie tworzy gradient koloru na podstawie wybranego koloru. Mamy różne style gradientów. Styl światła generuje gradient kolorów, który wygląda, jakby był podświetlony przez źródło światła. Idealny, aby dodać blasku kolorom. Głęboki styl przenosi tę koncepcję nieco dalej i dodaje więcej odcieni do spektrum kolorów. Styl tęczy jest idealny do jaśniejszych kolorów, aby stworzyć wygląd masy perłowej. A intensywny styl tworzy intensywny, głęboki i bogaty gradient kolorów.
Po wybraniu koloru możesz przeciągnąć suwaki, aby dostosować gradient. Pierwszy suwak kontroluje wielkość gradientu. Drugi suwak kontroluje obrót gradientu koloru. Możesz użyć tego do symulacji skąd pochodzi światło. Trzeci suwak przełącza się z trybu liniowego na radialny.
Jeśli jesteś zadowolony ze swojego gradientu, pobierz kod CSS, kopiując i wklejając wygenerowany kod gradientu koloru CSS. Umieść go we własnym kodzie CSS, aby uzyskać dokładnie taki sam gradient we własnym projekcie internetowym.
Jeśli chcesz utworzyć logo z gradientem kolorów, przygotowaliśmy dla Ciebie kilka wskazówek:
Użyj tego kodu CSS w swoim projekcie internetowym, aby uzyskać gradient kolorów: