Hit enter after type your search item

CSS box-shadow: 4 demos along with apple logo

The box-shadow property in CSS

In this tutorial, the apple logo is used to display without using any image. The demo in the following section uses the pure CSS where box-shadow CSS property is used along with other properties for making the apple logo.

Before showing you the example, FYI, the box-shadow property is used to attach shadows in the specified HTML elements like div. You may attach one or more shadows by using the box-shadow.

The simple syntax of using the box-shadow property is:

box-shadow: 20px 20px 3px #92A5DE inset;

Where,

  • The first value specifies the horizontal shadow length. This is the required value as using the box-shadow property.
  • The second value is the vertical distance of shadow. This is also required.
  • The 3px value is for blur radius. This is optional. If you want bigger and lighter shadow, use the higher value.
  • After that, the color of shadow is given. This is also optional. If you leave, the default black color will apply.
  • You may also use the “inset” keyword. If used, the inner shadow will be created. The default is the outer shadow. If you do not use this, the drop shadow is assumed.

Have a look at the following section to see the live demos and code for using the box-shadow property.

A demo of using box-shadow in a div tag

In this demo, a simple box shadow is created for the illustration purpose. There, I only used the horizontal, vertical and blur lengths along with the color of the shadow. No “inset” keyword is used:

CSS box shadow

See online demo and code

The CSS:


 

A demo with inset keyword in box-shadow

Using the same example as above except the inset keyword is added. Have a look and see the difference:

CSS box shadow inset

See online demo and code

The CSS:


 

You can see the difference between the two demos; in the first example, the drop shadow was created without using the inset keyword.

A demo of attaching multiple shadows to a single element

You may attach multiple shadows separated by commas in a single declaration. There, you may specify (for example), one drop shadow and other as the inset. That way, you may create shadows in the top, bottom and other directions separately and use different colors and blur length. See the following demo with multiple shadows:

CSS box shadow multiple shadows

See online demo and code

The CSS:


 

In that demo, you can see the first drop shadow is created with positive values while the next one is with negative vertical value. The last shadow is given the inset keyword.

Creating the apple logo by using box-shadow property

Now, taste the real example by using the CSS box-shadow property. In this demo, the apple logo is created purely based on CSS. Many other properties are also used, however, the main is box-shadow with multiple shadows:

CSS apple logo

See online demo and code

Get the complete code from the demo page.

 

Credit for this example: samarkandiy

This div height required for enabling the sticky sidebar