CSS Gradient | CSS Shadow

CSS3 Gradients

The CSS3 gradient feature allows you to create a gradient from one color to another without using any images. CSS gradient feature provides a flexible solution to generate smooth transitions between two or more colors. These are the following reasons to use CSS gradient.

• You don't have to use images to display transition effects.
• The download time and bandwidth usage can also be reduced.
• It provides better look to the element when zoomed, because the gradient is generated by the browser.

There are two types of gradient in CSS3.

1. Linear gradients
2. Radial gradients

CSS Linear Gradient

To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.

Syntax

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

 

See the Pen CSS Gradient by PANKAJ (@pankkap) on CodePen.

CSS3 Radial Gradients

In a radial gradient color emerge from a single center point and smoothly spread outward in a circular or elliptical shape rather than fading from one color to another in a single direction as with linear gradients. The basic syntax of creating a radial gradient can be given with:

radial-gradient(shape size at position, color-stop1, color-stop2, ...);

The arguments of the radial-gradient() function has the following meaning:

• position — Specifies the starting point of the gradient, which can be specified in units (px, em, or percentages) or keyword (left, bottom, etc).
• shape — Specifies the shape of the gradient's ending shape. It can be circle or ellipse.
• size — Specifies the size of the gradient's ending shape. The default is farthest-side.

The following example will show you create a radial gradient with evenly spaced color stops.

See the Pen CSS Radial Gradient by PANKAJ (@pankkap) on CodePen.

Radial Gradient - Differently Spaced Color Stops

The following example shows a radial gradient with differently spaced color stops:

  background-image: radial-gradient(red 5%, yellow 15%, green 60%);

If you want it to be a circular gradient positioned at the center of the left edge, you can do that by using the circle keyword before the position:

background-image: radial-gradient(circle at 0% 50%, yellow, #009966, purple);

 

CSS Shadow

CSS3 supported to add shadow to text or elements. Shadow property has divided as follows −

1. Text shadow
2. Box Shadow

CSS Text-shadow

As its name implies, this CSS property adds shadows to the text. It accepts the comma-separated list of shadows that applied to the text. It's default property is none. It applies one or more than one text-shadow effect on the element's text content.

Let's see the syntax of text-shadow property.

Syntax

text-shadow: h-shadow v-shadow blur-radius color| none | initial | inherit;  

Values

• h-shadow: It is the required value. It specifies the position of the horizontal shadow and allows negative values.
• v-shadow: It is also the required value that specifies the position of the vertical shadow. It does not allow negative values.
• blur-radius: It is the blur-radius, which is an optional value. Its default value is 0.
• color: It is the color of the shadow and also an optional value.
• none: It is the default value, which means no shadow.
• initial: It is used to set the property to its default value.
• inherit: It simply inherits the property from its parent element.

Let's understand it by using some illustrations.

See the Pen CSS Shadow by PANKAJ (@pankkap) on CodePen.

Multiple Shadows

.multishadows {

  text-shadow: -3px -3px 3px blue, 3px 3px 3px red;

  font-size: 30px;

  text-align: center;

}

Glow Effect using Shadows

.glowshadow {

  text-shadow: 0 0 0.1em cyan;

  background-color: black;

  font-size: 50px;

  text-align: center;

}

CSS3 box-shadow 

The box-shadow property can be used to add shadow to the element's boxes. You can even apply more than one shadow effects using a comma-separated list of shadows. The basic syntax of creating a box shadow can be given with:

box-shadow: h-offset v-offset blur spread color |inset|inherit|initial|none; 

The components of the box-shadow property have the following meaning

• offset-x — Sets the horizontal offset of the shadow.
• offset-y — Sets the vertical offset of the shadow.
• blur-radius — Sets the blur radius. The larger the value, the bigger the blur and more the shadow's edge will be blurred. Negative values are not allowed.
• color — Sets the color of the shadow. If the color value is omitted or not specified, it takes the value of the color property.
• spread— It sets the shadow size. The spread size depends upon the spread value.
• inset: Normally, the shadow generates outside of the box, but by using inset, the shadow can be created within the box.
• initial: It is used to set the property of the box-shadow to its default value.
• inherit: it is inherited from its parent.
• none: It is the default value that does not include any shadow property.

Let's understand it by using some illustrations.

See the Pen CSS Box Shadow by PANKAJ (@pankkap) on CodePen.

Cards Layout

You can also use the box-shadow property to create paper-like cards:

See the Pen CSS Card-1 by PANKAJ (@pankkap) on CodePen.

See the Pen CSS Card-2 by PANKAJ (@pankkap) on CodePen.