CSS provides the styling of background colour with gradients. You can blend as many colours to create gradients.
&nbsp;
<h4 dir="ltr">Linear Gradient</h4>
The gradient goes from top to bottom, and from left to right. To implement this gradient you need at least two colour stops. (could be more too)
Eg:
<pre class="language-css"><code>background-image: linear-gradient(100deg, blue, orange, red);</code></pre>
&nbsp;
Output:
<img src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/tutorial/css-gradients/CSS gradients.webp" width="1909" height="881">
The degree controls the angle of the gradient, and by using comma-separated values you can add multiple colours for the background.
Note: You can also use repeating-linear-gradient to keep repeating the background for the whole screen.
&nbsp;
<h4 dir="ltr">Radial Gradient</h4>
The gradient here is added from the centre focal point. The colour added first marks the centre of the gradient and keeps expanding circularly.
&nbsp;
Eg:
<pre class="language-css"><code>background-image: radial-gradient(blue, orange, red);</code></pre>
&nbsp;
Output:
<img src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/tutorial/css-gradients/radial gradients.webp" width="1903" height="893">
This is the default output but you can regulate the amount of each colour by adding a percentage with the colours, like radial-gradient(blue 20%, orange, red);
&nbsp;
The default shape of the gradient is an ellipse, but you can set it to circle too. Just add a circle ahead of the colours, separated by a comma.
&nbsp;
Output:
<img src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/tutorial/css-gradients/circle radial gradient.webp" width="1897" height="919">
&nbsp;
To use different sizes of the gradient we use the following properties:
<img src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/tutorial/css-gradients/radial gradient sizes.webp" width="1001" height="685">
&nbsp;
Output:
<img src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/tutorial/css-gradients/different sizes gradient.webp" width="1903" height="732">
<h4 dir="ltr">Conic Gradient</h4>
The colour gradient rotates around a specific point in the form of a cone. By default, the degree of the cone is taken as zero and starts from the centre.
&nbsp;
Eg:
<pre class="language-css"><code>background-image: conic-gradient(blue, orange, red);</code></pre>
&nbsp;
Output:
<img src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/tutorial/css-gradients/conic gradient.webp" width="1901" height="848">
&nbsp;

CSS Gradients

When it comes to web design, CSS (Cascading Style Sheets) plays an indispensable role in enhancing the visual aesthetics of a website. Among its vast array of properties, the ones that help bring depth and focus to an element are the shadow and outline properties. Let&rsquo;s delve into the magic of CSS shadows and outlines.
<h3>Box Shadows</h3>
<code>box-shadow</code> is a popular CSS property that enables designers to add shadow effects around an element's frame. It can be used to give any element, be it a div, image, or button, a 3D feel or to emphasize on hover.
<pre class="language-css"><code>box-shadow: h-offset v-offset blur spread color inset;</code></pre>
<ul>
<li><code>h-offset</code> and <code>v-offset</code>: Determines the shadow's horizontal and vertical position.</li>
<li><code>blur</code>: The larger the value, the blurrier the shadow.</li>
<li><code>spread</code>: Expands or shrinks the shadow size.</li>
<li><code>color</code>: Defines the shadow color.</li>
<li><code>inset</code>: Makes the shadow inner.</li>
</ul>
Here is an example:
<pre class="language-css"><code>.div-element { box-shadow: 5px 5px 15px 5px #888888; }</code></pre>
<h3>Text Shadows</h3>
<code>text-shadow</code> is utilized to give shadows specifically to the text. It can elevate the readability of the text or give it an elegant appearance.
&nbsp;
The Syntax for Text-Shadows is as follows:
<pre class="language-css"><code>text-shadow: h-offset v-offset blur color;</code></pre>
Here is an example:
<pre class="language-css"><code>.text-element { text-shadow: 2px 2px 4px #888888; }</code></pre>
<h3>Outlines</h3>
An outline is a line that is drawn around elements, outside the borders, to make the element "stand out". It's commonly used for accessibility purposes, like highlighting focused elements.
The Syntax for Outlines is as follows:
<pre class="language-css"><code>outline: width style color;</code></pre>
<ul>
<li><code>width</code>: Sets the outline width.</li>
<li><code>style</code>: Determines the style of the outline such as solid, dotted, or dashed.</li>
<li><code>color</code>: Sets the outline color.</li>
</ul>
Here is an example:
<pre class="language-css"><code>.button-element:focus { outline: 2px solid blue; }</code></pre>
<h3>Differences between Outlines and Borders:</h3>
While both can visually appear similar, outlines differ from borders in a few ways:
<ol>
<li>Position: Outlines don't take up space; they're drawn around the element, outside of any border.</li>
<li>Offset: Using the <code>outline-offset</code> property, you can set the space between an outline and the edge or border of an element.</li>
<li>Width: Borders can have varying widths on different sides, outlines have a uniform width.</li>
<li>Rounded Corners: Borders can have rounded corners using <code>border-radius</code>, while outlines generally cannot.</li>
</ol>

CSS Shadows

Inherit property allows the content values to be taken directly from the parent element. This can be applied to all of the CSS properties individually or using &ldquo;all&rdquo; at once.
&nbsp;
Eg:
<img src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/tutorial/css-inherit/inherit.webp" width="1105" height="892">
&nbsp;
Output:
<img src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/tutorial/css-inherit/inherit output.webp" width="1100" height="516">

CSS Inherit