Безкоштовно, без реєстрації

Градієнт із фото

Зберіть м'який меш-градієнт із кількох кольорів або візьміть палітру зі свого фото. Рухайте точки кольорів просто на полотні, додайте викривлення та зерно, завантажте картинку або скопіюйте CSS.

Наведіть на полотно - з'являться точки кольорів: перетягуйте їх, подвійний клік додає колір. Фото можна перетягнути на полотно або вставити з буфера.Перетягуйте точки кольорів пальцем, подвійний дотик додає колір.

CSS

Для лінійного, радіального та конічного - точний. Для меша й мозаїки - схоже тло з радіальних плям, без викривлення та зерна.


      

    

  


  

    

      Як користуватися
      
Свій градієнт за хвилину

    

    
    
      
  1. 1Виберіть кольориз палітри, випадково або зі свого фото
    2. 
      
  2. 2Порухайте точкиі підберіть викривлення та зерно
    3. 
      
  3. 3ЗавантажтеPNG, JPG, WebP, SVG або скопіюйте CSS
    4. 
    

    

      
Що це за градієнти

      
Меш-градієнт збирається з кількох точок кольору: кожна фарбує ділянку навколо себе, а між ними кольори плавно перетікають. Такі тла стоять за обкладинками, банерами, сторіс та екранами застосунків. Повзунок «М'якість» вирішує, наскільки широко змішуються кольори, а «Мозаїка» ріже полотно на зони за найближчою точкою. Лінійний, радіальний і конічний - класичні градієнти, які точно переносяться в CSS.

      
Палітра з фото

      
Завантажте фото - інструмент знайде в ньому до семи головних кольорів і розставить точки там, де ці кольори живуть на знімку. Так градієнт повторює настрій фотографії: захід сонця, море, інтер'єр, пакування товару. Фото залишається в браузері й нікуди не надсилається.

      
Викривлення та зерно

      
Викривлення зсуває кольори за візерунком: хвилі, плавний шум, комірки або вир навколо центру. «Сила» відповідає за те, наскільки сильно, «Масштаб візерунка» - за його крупність, кнопка з кубиком дає інший випадковий візерунок. Зерно додає легку зернистість, як на плівці: з ним градієнт не виглядає пластиковим і не дає смуг на екранах. У розділі «Налаштувати всі кольори» можна разом зсунути відтінок, насиченість і яскравість усієї палітри.

    

  


  
  
Спробуйте також
Теж безкоштовно і без реєстрації
SVG з картинкиPNG і JPG у векторний SVG: логотипи, іконки, силуетиКолаж із фотоСітки 2×2, 3×3, 1+2 та іншіФотоефектиЧ/б, сепія, негатив, різкість, розмиття, пікселі та рамкаГенератор фавіконівfavicon.ico та іконки з тексту чи картинки

  
  

    

      

        ЧаПи
        
Часті запитання

        
Не знайшли відповідь - напишіть нам, підкажемо.

      

      
    
        
  • У тому, що вказаний у полях W і H, до 4096 пікселів по більшій стороні (обмеження відеокарти в браузері). Є готові розміри для допису, сторіс, шапки X, прев'ю посилання та шпалер. На екрані показується зменшена копія з тими самими пропорціями.
    • 
        
  • PNG - без втрат, краще для дизайну. JPG і WebP - легші за вагою, підходять для соцмереж і сайтів. SVG для лінійного та радіального градієнта без викривлення та зерна - справжній векторний файл, який можна редагувати у Figma; для меш-градієнта та викривлень усередині SVG лежить картинка, бо векторного формату для таких градієнтів немає.
    • 
        
  • Для лінійного, радіального та конічного - так. Меш-градієнт у CSS збирається з кількох радіальних плям і виглядає схоже, але без викривлення та зерна: браузери не вміють малювати їх звичайним CSS. Якщо потрібне точнісінько таке тло, використовуйте PNG.
    • 
        
  • Фото зменшується, і всі його пікселі групуються за близькістю кольору (метод k-середніх). Центри груп стають кольорами палітри, а точка кожного кольору ставиться туди, де цей колір найчастіше трапляється на знімку. Надто рідкісні кольори відкидаються.
    • 
        
  • Так. Натисніть на квадратик кольору, щоб відкрити палітру, або впишіть HEX-код у поле поруч. Кольорів може бути від 2 до 12. Хрестик видаляє колір, плюс додає новий, а подвійний клік по полотну ставить нову точку саме в цьому місці.
    • 
        
  • Натисніть «Посилання на градієнт» - посилання скопіюється, і за ним відкриється той самий градієнт з усіма кольорами, точками та налаштуваннями. Крім того, останній градієнт зберігається у вашому браузері й відкривається під час наступного візиту. Помилилися - скасуйте крок кнопкою зі стрілкою або сполученням Ctrl+Z.
    • 
        
  • На екрані малюється зменшена копія, а файл - у повному розмірі, тому зерно та дрібні деталі викривлення у файлі дрібніші. Самі кольори та розташування точок збігаються.
    • 
        
  • Так, без обмежень: це ваша картинка. Фото, з якого взято палітру, нікуди не йде, а палітра кольорів не є об'єктом авторського права.
    •