KOEN

CSS Gradient & Box Shadow Generator

GRADIENT · SHADOW

Design linear, radial and conic CSS gradients and multi-layer box-shadows with a live preview, start from presets and copy ready-to-use CSS code.


        

          
          
        

      

      

        PRESETS
        

      

    


    
  


  
  

    

      

        

          CARD
          Preview card
        

      

      

        

        

          
          
        

      

      

        PRESETS
        

      

    


    
  









  

    

      HOW TO
      
How to use

      
    
      
  1. Choose Gradient or Box shadow from the tabs at the top.
    2. 
      
  2. For gradients, pick Linear, Radial or Conic, set the angle or center, and drag the color stops on the bar.
    3. 
      
  3. For shadows, add up to 8 layers and adjust offset, blur, spread, color and inset for each one.
    4. 
      
  4. Start from a preset if you like, then click Copy CSS for the full declaration or Copy value for just the value.
    5. 
      

    

    

      PAIRS WELL WITH
      
Pairs well with

      
    

  

  
  

    FAQ
    
FAQ

    
How do I add or remove color stops?
Click an empty spot on the bar or press + Add stop. Remove a stop with its ✕ button or by pressing Delete while its handle is focused. A gradient needs at least two stops.

    
What does Repeat do?
It switches to repeating-linear-gradient (or the radial and conic versions), which repeats the stop pattern to create stripes and rings.

    
Does the generated CSS work in all browsers?
Linear and radial gradients and box-shadow work in all modern browsers. Conic gradients are supported in current versions of Chrome, Edge, Safari and Firefox.