Skip to main content

This content of this site is still in development.

Cross Shadows

Cross shadows create a shadow over half the content of an element along a 45 deg angle. A cross shadow can be applied over a solid color or an image.

Cross shadows can be applied to images using the CSS rule or using an application like photoshop. When using photoshop be sure to keep the shadow angle at 45deg to match the other elements of the website.

CSS Code:

.crossshadow {position:relative;}  
.crossshadow:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(45deg,transparent 50% ,rgba(0,0,0,.05) 50%);  
    z-index:0;
  }          

Examples:

Cross Shadow container with background color.
Cross Shadow container with background image.