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

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

CSS 

  




  


  
  

  
  
  
  

    
Возможности

    

      
      

        
        Slider controls
      

      
      

        
        Color picker
      

      
      

        
        Inset toggle
      

      
      

        
        Multiple layers
      

      
      

        
        Live preview & CSS code
      

      
    

  

  

  
  

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

    

      
        
        
1. Перемещайте ползунки для смещения X, смещения Y, размытия и распространения.

        
        
2. Выберите цвет тени с помощью палитры.

        
        
3. Включите «Inset» для создания внутренней тени.

        
        
4. Скопируйте сгенерированный CSS-код.

        
      
    

  


  
  
  
  

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

    
    

      What is box-shadow?
      
The CSS box-shadow property adds shadow effects around an element's frame.

    

    
  

  

  
  
  

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

    

      
      
        

          
        

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

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

      
      
      
        

          
        

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

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

      
      
      
        

          
        

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

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

      
      
      
        

          
        

        
Генератор CSS Grid

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