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.
- Linear gradients
- 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 −
- Text shadow
- 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
Glow Effect using Shadows
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.
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.