Генератор CSS-градиентов

Создавайте линейные, радиальные и конические CSS-градиенты визуально. Добавляйте несколько цветовых точек и копируйте готовый CSS-код. Предпросмотр обновляется в реальном времени.

Студия · нейтральное окружение
90° 

  




  


  
  

  
  
  
  

    
Возможности

    

      
      

        
        Linear / radial / conic
      

      
      

        
        Multiple color stops
      

      
      

        
        Angle / direction control
      

      
      

        
        Live preview & CSS code
      

      
    

  

  

  
  

    
Как использовать

    

      
        
        
1. Выберите тип градиента и угол; рабочая область показывает предпросмотр в полный размер.

        
        
2. Тяните маркеры по дорожке, кликайте по свободному месту, чтобы добавить точку (до шести), или подстраивайте цветами и процентами.

        
        
3. Скопируйте готовый CSS — на шахматном фоне видно полосы на прозрачных участках.

        
      
    

  


  
  
  
  

    
Часто задаваемые вопросы

    
    

      What types of gradients does CSS support?
      
CSS supports linear, radial, and conic gradients, each with different visual effects.

    

    
  

  

  
  
  

    
Похожие инструменты

    

      
      
        

          
        

        
Генератор CSS box-shadow

        
Визуально создавайте CSS-свойство box-shadow с помощью ползунков. Просматривайте...

      
      
      
        

          
        

        
Генератор CSS border-radius

        
Визуально настройте CSS border-radius — управляйте всеми четырьмя углами по отде...

      
      
      
        

          
        

        
CSS Flexbox-песочница

        
Изучайте и экспериментируйте с CSS Flexbox. Настраивайте свойства контейнера и н...

      
      
      
        

          
        

        
Генератор CSS Grid

        
Визуально создавайте CSS Grid-макеты. Задайте строки, столбцы, отступы и скопиру...