Adding shadows to rectangles through HTML container

Starting with the release of Strategy ONE (March 2024), dossiers are also known as dashboards.
 

1. In the dossier's toolbar, click HTML Container . A blank HTML container is added to the dossier. 
     
   
2. Click HTML Text and add the following code: 
    
   

<style> 

/* adding shadows to rectangles */ 

[aria-label*="Rectangle-"]   

{ 

    filter: drop-shadow(5px 10px 12px rgb(0 0 50 / 0.16)) !important; 

} 

  

/* disabling frame around rectangles - */ 

[aria-label*="Rectangle-"]  rect { 

stroke: #EBEBEB 

 !important; 

} 

</style> 

 
 
Shadow will be added to all rectangles that name starts with "Rectangle-". 
  
Note: shadow will be added to all rectangles within the same Chapter, not only to the current page. 
 

1. For Web view remove the frames by typing HEX for white color - #FFFFFF in this part of the code. 
   

/* disabling frame around rectangles - */ 

[aria-label*="Rectangle-"]  rect { 

stroke: #EBEBEB 

 !important; 

} 

1. To change the horizontal and vertical position of a shadow modify the first and second parameters after the brackets: 
   

{ 

    filter: drop-shadow(5px 10px 12px rgb(0 0 50 / 0.16)) !important; 

} 

1. The third parameter is the shadow's blur.  
   

{ 

    filter: drop-shadow(5px 10px 12px rgb(0 0 50 / 0.16)) !important; 

} 

1. To change the shadow's color, we need to modify the following RGB code: 
    
   

{ 

    filter: drop-shadow(5px 10px 12px rgb(0 0 50 / 0.16)) !important; 

} 

1. Last one is shadow's opacity.  
   

{ 

    filter: drop-shadow(5px 10px 12px rgb( 

}

 
 
After: