CSS3 gradient and shadow in more details

CSS stands for Cascading Style Sheets. It describes how HTML elements are to be displayed on the screen, paper, or in other media. It saves a lot of work. It can control the layout of multiple web pages all at once. External stylesheets are stored in CSS files. CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, layout designs, variations in the display for different devices and screen sizes as well as a variety of other effects. In this article, we are going to discuss CSS3 gradient and shadow effects in more details. It will help you to design websites beautifully and more prominently. So, let's start it -

What are CSS gradients?

CSS gradients let you display smooth transitions between two or more specified colors. As the designer, it’s your job to keep up with trends. Gradients, in general, have been a trend for a while. Considering that various sources have been discussing the “comeback” of CSS gradients for years now, it’s pretty clear that this “trend” is here to stay. It’s your job to make things that are aesthetically appealing and attractive to the masses. And, well, gradients are the best way to do that.

While gradients come in many shapes, shades, and sizes, you’ll primarily see them in two types - the linear gradient and the radial gradient.

Linear Gradients

Linear gradient has become extremely popular and can be seen all over the digital branding of companies like Stripe and Instagram. You can use linear gradients everywhere - in logos, web design, and everything in between.

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.

The box

The simplest ingredient of a linear gradient is the box which encompasses it. The box will cover the entirety of whatever element you are placing the gradient in-be it a div, button, anything. However, you can change that by using the background-size property. If you set that property to, say, 350px * 200px, the box would take that size-and the gradient along with it. By default, the box, at any size, will be positioned at the top-left corner of the containing element. You could play with this by setting the background-position property. The possibilities are endless!

The line

The line is where each of your color-stops is located and distributed along. This line may be longer than the box, and some of the color-stops may also be located outside of the box, depending on how you set them.

The angle

The angle determines how the gradient will look and be presented inside the box. Without getting into all the crazy geometry and math ridiculousness, the gradient line passes along through the center of this angle, and the angle is determined by the relationship between the center of that line and a vertical line that passes through the center of the box. You can define an angle in the code with a keyword or number and unit. With a keyword, you would use variations of to bottom, to the top, to left, and to right to determine where the line should move to from the starting point. You could also use number and unit pairings to determine the angle and direction of the line.

The color-stops

No gradient would be a proper gradient without some colors to transition between! These colors can be set as any type: named, HEX, RGB, or HSL. Because of this, there are a lot of different options when it comes to how your gradient can be shown. Positions can also be added after each color for more control over how the gradient looks and where each color blends with the next. These positions can be set in percentages or pixels, depending on which is easier for you. A simpler way of thinking about these positions is that they tell the colors where to stop, hence the term comes “color-stop”. If you don’t manually set positions, the browser will automatically determine the positioning based on how many colors are set, and those positions will be evenly spread out across the box.

Repeating a linear-gradient

A repeating linear gradient is as simple as it sounds - a repeating function of a linear gradient. Essentially, a clever way to organize syntax to get your linear gradient to repeat for as long as you’d like. The repeating-linear-gradient() function is used to repeat linear gradients.

Why do you need repeating linear gradients?

You know that similar goals can be accomplished with a linear gradient and a defined background size. Repeating linear gradients can save you lots of time and effort. Patterns are easier when you use the repeating linear gradient function. They’re more easily accomplished with a simple syntax instead of stacking a bunch of linear gradient codes.

Radial Gradients

Radial Gradients are just like linear gradients with a little bit of an exception. They both are progressions of two or more colors, but unlike a linear gradient, radial gradient is defined by its center. To create a radial gradient you must also define at least two color stops. By default, a shape is an ellipse, size is farthest-corner, and position is center.

They start with a specific color on the outside, but when you suck on them for a bit, the colors gradually change moving toward the center. The outside of your gobstopper could be green, and the very center could be red, with gradual color change throughout.

Why should you use radial gradients?

When you’re trying to design a site that’s visually appealing, trendy, and engaging, then gradients are right for all those calls, and radial gradients can give elements of your site a unique, trendy look. Even if you’re not invested in the latest fad, you obviously want your site to look good, and using gradients is one of the easiest ways to boost the visual appeal of your site.

Text Gradient

Text gradients aren’t much different! It’s that same idea of a straight line with progressing colors and color stops, but instead of filling a background with the gradient, you’re applying the gradient to specific text!

You may think that why Text Gradients Matter. So, here it is -

Coders and website builders use gradient text all the time, in fact, gradients are one of the latest crazes in website design for a few reasons: they’re easy to implement (once you know what you’re doing) and they have a wonderful visual effect (especially if you have an image-light website). Whether muted text gradients or bright and highly colorful, knowing how to create a gradient pattern with your text is a useful tool for your website.

How to Create a Text Gradient?

At first, you have to understand what you’re ultimately trying to do is use a gradient as a font color in CSS without using images. When it comes to coding and crafting, it’s important to know what you’ll need. Breaking down the basics is the first step in figuring out how to construct your text gradient syntax.

Check out these keywords to gain a better understanding of what you’ll need to create your text gradient -

Font Size

This one is self-explanatory. You’ll need to set up how large you’d like your font to be before you can set up the rest of your gradient. Working with font size in CSS is based on EMS, pixels, points, and percentages.

Direction

Your text gradient isn’t so different from your linear gradient, specifically when it comes to direction. You can define the linear gradient angle in the code with a keyword or number and unit. With a keyword, you would use variations of to bottom, to the top, to left, and to right to determine where the line should move to from the starting point. These directional keywords can be combined-like to top right or to bottom left to create a diagonal line. You could also use number and unit pairings to determine the angle and direction of the line.

Colors and Color Stops

In the most basic version of a CSS text gradients, you'll need at least two colors for the gradient to transition between. These are typically referred to as color-stops. It tells the code at which points each color should stop along the text gradient. These colors can be set as any type: named, HEX, RGB, or HSL.

Conic Gradients

A conic gradient is similar to a radial gradient. Both are circular and use the center of the element as the source point for color stops. However, where the color stops of a radial gradient emerge from the center of the circle, a conic gradient places them around the circle. They're called "conic" because they tend to look like the shape of a cone.

Set Shape

The shape parameter defines the shape. It can take the value circle or ellipse. The default value is an ellipse.

Using Angles

If you want more control over the direction of the gradient, you can define an angle, instead of the predefined directions (to bottom, to the top, to right, to left, to bottom right, etc.). The angle is specified as an angle between a horizontal line and the gradient line.

Using Transparency

CSS gradients also support transparency, which can be used to create fading effects. To add transparency, you can use the rgba() function to define the color stops. The last parameter in the rgba() function can be a value from 0 to 1, and it defines the transparency of the color: 0 indicates full transparency, 1 indicates full color (no transparency).

CSS Shadow Effects

With CSS you can add shadow to text and to elements. CSS supported to add shadow to text or elements. Shadow property has divided as follows

Text shadow

CSS supported to add shadow effects to text. The text-shadow CSS property adds shadows to text. It accepts a comma-separated list of shadows to be applied to the text and any of its decorations. Each shadow is described by some combination of X and Y offsets from the element, blur radius, and color.

Properties -

h-shadow - Required for the position of the horizontal shadow. Negative values are allowed.
v-shadow - Required for the position of the vertical shadow. Negative values are allowed.
blur-radius - optional - The blur radius. The default value is 0.
color - optional - The color of the shadow.
none - Default value. No shadow.
initial - Sets this property to its default value.
inherit - Inherits this property from its parent element.

Box Shadow

The CSS box-shadow property applies shadow to elements. In its simplest use, you only specify the horizontal shadow and the vertical shadow. The box-shadow CSS property is used to add shadow effects around an element's frame. You can specify multiple effects separated by commas if you wish to do so. A box-shadow is described by X and Y offsets relative to the element, blur and spread radii and color. The box-shadow property enables you to cast a drop shadow from the frame of almost any element. You can also add shadows to the ::before and ::after pseudo-elements, to create an interesting effect.

Properties

none - Default value. No shadow is displayed.
h-offset - Required for the horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box.
v-offset - Required for the vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box.
blur - optional - The blur radius. The higher the number, the more blurred the shadow will be.
spread - optional - The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow.
color - optional - The color of the shadow. The default value is the text color.
inset - optional - Changes the shadow from an outer shadow (outset) to an inner shadow.
initial - Sets this property to its default value.
inherit - Inherits this property from its parent element.

Multiple Shadows

To add more than one shadow to the text, you can add a comma-separated list of shadows.

#box shadow Stories - 1 stories

CSS3 gradient and shadow in more details