Category: Advanced Features

box shadow Property

CSS box-shadow property adds a shadow effect around an element. One or more shadow effects can be added, separated by commas. The box shadow is described by horizontal and vertical offsets relative to the element, blur, spread radius and color.

Syntax

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

Property Values

Value	Description
none	This value does not show any shadow. Default
h-offset	It defines the horizontal offset. Positive values place the shadow to the right of box, negative values place the shadow to the left of box. Required.
v-offset	It defines the vertical offset. Positive values place the shadow below the box, negative values place the shadow above the box. Required
blur	It defines the blur radius. Higher values have higher blur. Optional.
spread	It defines the spread radius. Positive values increases size of shadow, negative values decreases size of shadow. Optional
color	It defines the color of the shadow. Different formats of color can be used. Default is color of text. Optional
inset	It changes the outer shadow to inner shadow.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Box Shadow Property

The following examples explain the box-shadow property with different values.

Box Shadow Property with Box Shadow

To set a shadow to a box, we require to specify atleast two values, one for the horizontal offset and the other for the vertical offset. Depending on the signs of the values, the position of the shadow changes accordingly. This is shown in the following example.

Example

<!DOCTYPE html><html><head><style>
    .container {
        display: grid;
        justify-content: center;
        align-items: center;
        gap: 30px;
    }
    .boxes {
        padding: 50px;
        text-align: center;
        font-weight: bold;
    }
    .first {
        background-color: lightcoral;
        box-shadow: 10px 10px;
    }
    .second {
        background-color: lightblue;
        box-shadow: 10px -10px;
    }
    .third {
        background-color: lightgreen;
        box-shadow: -10px 10px;
    }
    .fourth {
        background-color: lightgrey;
        box-shadow: -10px -10px;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;h2&gt;
    CSS box-shadow property
&lt;/h2&gt;&lt;p&gt;
    Positive horizontal offset places the shadow
    to the right of box and negative horizotal offset
    places the shadow to the left of box. 
&lt;/p&gt;&lt;p&gt;
    Positive vertical offset places the 
    shadow below the box and negative values places
    it above the box.
&lt;/p&gt;&lt;div class="container"&gt;&lt;p class="first boxes"&gt;
        box-shadow: 10px 10px
    &lt;/p&gt;&lt;p class="second boxes"&gt;
        box-shadow: 10px -10px
    &lt;/p&gt;&lt;p class="third boxes"&gt;
        box-shadow: -10px 10px
    &lt;/p&gt;&lt;p class="fourth boxes"&gt;
        box-shadow: -10px -10px
    &lt;/p&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Box Shadow Property with Blur



To set a blur to the shadow of a box, we require to specify three values. The first two values are the horizontal and vertical offsets while the third value is for the blur, higher the third value greter will be the blur. This is shown in the following example.



Example



<!DOCTYPE html><html><head><style>
    .container {
        display: grid;
        justify-content: center;
        align-items: center;
        gap: 30px;
    }
    .boxes {
        padding: 50px;
        text-align: center;
        font-weight: bold;
    }
    .first {
        background-color: lightcoral;
        box-shadow: 10px 10px 10px;
    }
    .second {
        background-color: lightcoral;
        box-shadow: 10px 10px 20px;
    }
    .third {
        background-color: lightcoral;
        box-shadow: 10px 10px 40px;
    }    
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;h2&gt;
    CSS box-shadow property
&lt;/h2&gt;&lt;p&gt;
    The third value decides the blur, 
    greater the value more is the blur.
&lt;/p&gt;&lt;div class="container"&gt;&lt;p class="first boxes"&gt;
        box-shadow: 10px 10px 10px
    &lt;/p&gt;&lt;p class="second boxes"&gt;
        box-shadow: 10px -10px 20px
    &lt;/p&gt;&lt;p class="third boxes"&gt;
        box-shadow: -10px 10px 40px
    &lt;/p&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Box Shadow Property with Spread Value



To set the size of the shadow of a box, we require to specify four values. The first two values are the horizontal and vertical offsets while the third value is for the blur, the fourth value decides the size of the shadow, positive values result in larger shadows while negative values result in smaller shadows. This is shown in the following example.



Example



<!DOCTYPE html><html><head><style>
    .container {
        display: grid;
        justify-content: center;
        align-items: center;
        gap: 30px;
    }
    .boxes {
        padding: 50px;
        text-align: center;
        font-weight: bold;
    }
    .first {
        background-color: lightblue;
        box-shadow: 10px 10px 10px 5px;
    }
    .second {
        background-color: lightblue;
        box-shadow: 10px 10px 20px 15px;
    }
    .third {
        background-color: lightblue;
        box-shadow: 10px 10px 40px -5px;
    }    
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;h2&gt;
    CSS box-shadow property
&lt;/h2&gt;&lt;p&gt;
    The fourth value decides the size of the shadow, 
    positive value results in larger shadow while negative
    value results in smaller shadow.
 &lt;/p&gt;&lt;div class="container"&gt;&lt;p class="first boxes"&gt;
        box-shadow: 10px 10px 10px 5px
    &lt;/p&gt;&lt;p class="second boxes"&gt;
        box-shadow: 10px -10px 20px 14px
    &lt;/p&gt;&lt;p class="third boxes"&gt;
        box-shadow: -10px 10px 40px -5px
    &lt;/p&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Box Shadow Property with Color Value



To set a color to the shadow of a box, we require to specify atleast three values. The first two values are the horizontal and vertical offsets while the third value is for the color, the color can be specified along with blur and spread as well. The color can be specified in different format (eg. color names, hexadecimal values, rgb values etc.). This is shown in the following example.



Example



<!DOCTYPE html><html><head><style>
    .container {
        display: grid;
        justify-content: center;
        align-items: center;
        gap: 30px;
    }
    .boxes {
        padding: 50px;
        text-align: center;
        font-weight: bold;
    }
    .first {
        background-color: lightcoral;
        box-shadow: 10px -10px grey;
    }
    .second {
        background-color: lightcoral;
        box-shadow: 10px 10px 20px rgb(51, 204, 0);
    }
    .third {
        background-color: lightcoral;
        box-shadow: 10px 10px 40px -5px hsl(225, 100%, 50%);
    }    
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;h2&gt;
    CSS box-shadow property
&lt;/h2&gt;&lt;p&gt;
    The color can be specified as third parameter,
    fourth parameter of even fifth parameter. 
    The specified color will be applied to the shadow.
 &lt;/p&gt;&lt;div class="container"&gt;&lt;p class="first boxes"&gt;
        box-shadow: 10px -10px grey
    &lt;/p&gt;&lt;p class="second boxes"&gt;
        box-shadow: 10px 10px 20px rgb(51, 204, 0)
    &lt;/p&gt;&lt;p class="third boxes"&gt;
        box-shadow: 10px 10px 40px -5px hsl(225, 100%, 50%)
    &lt;/p&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Box Shadow Property with Inset Value



To let the box shadow appear inside the element and not outside the element, we use the inset value. This is shown in the following example



Example



<!DOCTYPE html><html><head><style>
    .container {
        display: grid;
        justify-content: center;
        align-items: center;
        gap: 30px;
    }
    .boxes {
        padding: 50px;
        text-align: center;
        font-weight: bold;
    }
    .first {
        background-color: lightgreen;
        box-shadow: 10px -10px red inset;
    }
    .second {
        background-color: lightgreen;
        box-shadow: 10px 10px 20px rgb(51, 204, 0) inset;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;h2&gt;
CSS box-shadow property
&lt;/h2&gt;&lt;p&gt;
    The inset value places the
    shadow within the elment.
&lt;/p&gt;&lt;div class="container"&gt;&lt;p class="first boxes"&gt;
        box-shadow: 10px -10px red inset
    &lt;/p&gt;&lt;p class="second boxes"&gt;
        box-shadow: 10px 10px 20px rgb(51, 204, 0) inset
    &lt;/p&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Box Shadow Property with Multiple Shadows



To have multiple shadows for a box, each style must be comma separated. The shadows will appear in the order specified in box-shadow property. This is shown in the following example.



Example



<!DOCTYPE html><html><head><style>
    .container {
        display: grid;
        justify-content: center;
        align-items: center;
        gap: 30px;
    }
    .boxes {
        padding: 50px;
        text-align: center;
        font-weight: bold;
    }
    .first {
        background-color: lightcoral;
        box-shadow: 10px -10px grey, 
        15px -15px black, 
        20px -20px brown;
    }
    .second {
        background-color: lightgreen;
        box-shadow: 5px 5px red, 
        10px 10px blue, 
        15px 15px green;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;h2&gt;
CSS box-shadow property
&lt;/h2&gt;&lt;p&gt;
    Number of shadows can be altered by 
    specifying the different styles and
    separating them by commas. 
&lt;/p&gt;&lt;div class="container"&gt;&lt;p class="first boxes"&gt;
        box-shadow: multiple shadows
    &lt;/p&gt;&lt;p class="second boxes"&gt;
        box-shadow: multiple shadows
    &lt;/p&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

August 20, 2025

Gradients

CSS gradients allows to design custom colors for HTML elements by creating a smooth transition between two or more colors.

What is CSS Gradient?

In CSS, gradient is a special type of user defined images that can be used for background or borders of element.
We can set a gradient to background property of any HTML elements using function gradient(type, color1, color2, color3);
Zooming a image gradient does not loose it’s quality as this are defined by browsers according to developers code.

Types of CSS Gradients
Linear Gradients
Radial Gradients
Conic Gradients
Gradients for Borders

Positioning Color Stops
Creating Hard Lines
Color Bands Using Gradients
Stacked Gradients
Related Functions

Types of CSS Gradients

CSS defines three types of gradients

Linear Gradient: Goes from left to right, up to down or diagonally.
Radial Gradient: Start from center to edges.
Conic Gradient: Revolve around a center point.

Linear GradientRadial GradientConic Gradient

Choose a gradient for background

Linear Gradients

The linear gradient creates a color band that flows in a single direction, i.e. from left-to-right, top-to-bottom, or at any angle.

Syntax

linear-gradient(direction, color1, color2, ...);/* Gradient from bottom right to top left */linear-gradient(to top left, color1, color2, ...);/* Gradient at an angle 45 degree */linear-gradient(45deg, red, yellow);

The direction parameter specifies the angle or direction ( [to left | to right] || [to top | to bottom]) of the gradient.

Example

In order to create a basic linear gradient, you just need two colors, which are known as color stops. You must have minimum two, but can have more than two as well.

Following example demonstrates this:

<html><head><style>
  div {
     height: 70px;
     width: 100%;
  }
  .topBottom {
     background: linear-gradient(green, yellow);
  }
  .RightLeft{
     background: linear-gradient(to right, green, yellow);
  }
   </style></head><body><h1>Linear gradient</h1><h3>Top to Bottom ( Default )</h3><div class="topBottom"></div><h3>Right to left</h3><div class="RightLeft"></div></body></html>

Radial Gradients

A radial gradient is a type of gradient that consists of colors radiating outward from a central point.

In a radial gradient, the colors smoothly transition from one color at the center to another color at the outer edges in a circular or elliptical pattern.

Syntax

radial-gradient(shape size position, color1, color2..);

The shape parameter defines the shape of the gradient (circle or ellipse).
The size parameter specifies the size of the shape.
The position parameter sets the center of the gradient

Example

In order to create a basic radial gradient, you just need two colors. The center of the gradient is at 50% 50% mark, by default; where the gradient is elliptical matching with the aspect ratio of its box.

Let us see an example:

<html><head><style>
  div {
     height: 100px;
     width: 100%;
  }
  .gradient {
     background: radial-gradient(green, yellow);
  } 
  .center-gradient {
     background:
        radial-gradient(
           at 0% 50%,
           green 30px,
           yellow 60%,
           magenta 20%
        );
  }
   </style></head><body><h1>Radial gradient</h1><h3>Simple Radial Gradient</h3><div class="gradient"></div><h3>Center Positioned Radial Gradient</h3><div class="center-gradient"></div></body></html>

Conic Gradients

A conic gradient, also known as a conical gradient or angular gradient, is a type of gradient in which colors are arranged in a circular or conical pattern, radiating out from a central point in a 360-degree arc.

Syntax

conic-gradient(from 'angle' at 'position','color-list')

position (optional): Specifies the position of the starting point of the gradient. It can be a percentage or a keyword like center.
angle (optional): Specifies the starting angle of the gradient in degrees.
color-list : Defines the colors and their positions in the gradient.

Example

In this example we will create a conic gradient pie chart with four different colors, then align gradient at different locations of diagram.

<!DOCTYPE html><html lang="en"><head><style>
  div {
     height: 80px;
     width: 110px;
     border-radius: 50%; 
  }
  .gradient1{
     background: conic-gradient(
                    from 45deg at 50% 50%, 
                    red, yellow, green, 
                    blue, red);
  }
  .gradient2{
     background: conic-gradient(
                    from 45deg at 20% 40%, 
                    red, yellow, green, 
                    blue, red);
  }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;h1&gt;Conic Gradient Example&lt;/h1&gt;&lt;h3&gt;Align at center&lt;/h3&gt;&lt;div class="gradient1"&gt;&lt;/div&gt;&lt;h3&gt;Align at 20-40&lt;/h3&gt;&lt;div class="gradient2"&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Gradients for Borders



The CSS gradients can be used to create fancy borders as well. You can use the gradients in wide variety to create effects in the border patterns.



Syntax



border-image:linear-gradient('color-list')



You can also use radial and conical gradients for borders.



Example



Here is an example of use of gradients in creation of borders:



<!DOCTYPE html><html lang="en"><head><style>
     .gradient-border {
        height: 200px;
        width: 200px;
        border: 10px solid;
        border-image: linear-gradient(
                          to right, 
                          red, yellow, 
                          green, blue) 1;
     }
  &lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;h2&gt;Gradient Border &lt;/h2&gt;&lt;div class="gradient-border"&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Positioning Color Stops



Positioning color stops for gradient allows to control the point at which transition occur for a gradient.



Syntax



linear-gradient(to right, red 10%, pink 30%, blue 60%)




to right: Specifies the direction of gradient.



red 10%: Sets the red color to stop at 10% of the gradient



pink 30%: Sets the pink color to stop at 30% of the gradient.



blue 60%: Sets the blue color to stop at 60% of the gradient.




Example



<html><head><style>
  div {
     height: 100px;
     width: 100%;
  }
  .linear-position {
     background: linear-gradient(to right, 
                    blue 15px, magenta 33%, 
                    red 66%, yellow 60%, 
                    orange 100%);
  }
   </style></head><body><div class="linear-position"></div></body></html>



Creating Hard Lines



A hard line can be created in between two colors, such that no smooth transition can be seen. This effect can be achieved by carefully positioning color stops in CSS gradients. Check out following example



Example



In this example we will create hard line using gradient function.



<html><head><style>
  div {
     height: 100px;
     width: 100px;
     display: inline-block;
     text-align: center;
     margin: 5px;
  }
  .linear-hard-line {
     background: linear-gradient(to top right, 
                       green 50%, orange 50%);
  }
   </style></head><body><div class="linear-hard-line"></div></body></html>



Color Bands Using Gradients



In order to create a striped effect, the second color stop for each color is set at the same location as the first color stop for the adjacent color.



Syntax



linear-gradient(to right, red 10%, 
           pink 10% 30%, 
           blue 60% 80%,
           yellow 80%);</pre>


Example



In this example will create a multi colored color band.



<html><head><style>
  div {
     height: 100px;
     width: 100%;
  }
  .linear-gradient-stripes {
     background: linear-gradient(
                 to right,
                 green 20%,
                 lightgreen 20% 40%, 
                 orange 40% 60%,
                 yellow 60% 80%,
                 red 80%);
  }
   </style></head><body><div class="linear-gradient-stripes"></div></body></html>



Stacked Gradients



One gradient can be stacked over other gradients. Just make sure the gradient at the top should not be completely opaque, so that the gradients below it can be seen.



Example



Lets see an example of stacked gradients.



<html><head><style>
  div {
     height: 200px;
     width: 100%;
  }
  .stacked-linear {
     background: 
        linear-gradient(90deg, green, yellow),
        linear-gradient(220deg, white 70.71%, black 38%),
        linear-gradient(217deg, orange, grey 70.71%);
  }
   </style></head><body><div class="stacked-linear"></div></body></html>



Related Functions



The following table lists all the functions related to CSS gradients:



Gradient Type Description Example
linear-gradient() Type of gradient in which colors transition in a straight line from one point to another. Try It
radial-gradient() Type of gradient that consists of colors radiating outward from a central point. Try It
conic-gradient() Type of gradient in which colors are arranged in a circular or conical pattern. Try It
repeating-linear-gradient() Allows you to create a linear gradient pattern that repeats in a specified direction. Try It
repeating-radial-gradient() Allows you to create a repeating radial gradient pattern. Try It
repeating-conic-gradient() Allows you to create a repeating conic gradient pattern. Try It

Gradient Type	Description	Example
linear-gradient()	Type of gradient in which colors transition in a straight line from one point to another.	Try It
radial-gradient()	Type of gradient that consists of colors radiating outward from a central point.	Try It
conic-gradient()	Type of gradient in which colors are arranged in a circular or conical pattern.	Try It
repeating-linear-gradient()	Allows you to create a linear gradient pattern that repeats in a specified direction.	Try It
repeating-radial-gradient()	Allows you to create a repeating radial gradient pattern.	Try It
repeating-conic-gradient()	Allows you to create a repeating conic gradient pattern.	Try It

August 20, 2025

Colors

CSS uses color values to specify a color. Typically, these are used to set a color either for the foreground of an element (i.e. its text) or else for the background of the element. They can also be used to affect the color of borders and other decorative effects.

You can specify your color values in various formats. Following table lists all the possible formats −

Format	Syntax	Description	Example
Keyword	<property>: <colorname>	CSS has a set of predefined color names that you can use directly.	red, blue, green, yellow, black, white, etc.
Hexadecimal Code	#RRGGBB	Starts with a hash (#) followed by six hexadecimal digits.	#FF0000 – red
Short Hexadecimal Code	#RGB	Shorter version of hexadecimal format where each of the RGB components is represented by a single digit, and the value is duplicated.	#F00 – red
RGB	rgb(red,green,blue)	Colors can be defined using the rgb() function, which takes three parameters representing the red, green, and blue values.	rgb(0, 0, 255) – blue
RGBA	rgba()	Similar to RGB, with an additional parameter for the alpha (transparency) value. 0 (fully transparent) and 1 (fully opaque)	rgba(0,0,255,0.5) – translucent blue
HSL	hsl()	Colors can be defined using the rgb() function which stands for Hue (0 to 360 degree), Saturation (%), and Lightness (%).	hsl(120, 100%, 50%) – pure green
HSLA	hsla()	Similar to HSL, with an additional parameter for the alpha (transparency) value.	hsl(120, 100%, 50%, 0.5) – translucent green
currentcolor Keyword	currentcolor	It refers to the value of the color property of the element.	color: red; /* Red text color / border: 10px solid currentcolor; / Red border color */
System color	as per OS or browser	CSS allows usage of system colors defined by the user’s OS or browser.	ButtonText, Window, WindowText

These formats are explained in more detail in the following sections −

CSS Colors – Keyword

CSS supports the color names to be directly passed to the property background-color and color. 140 standard color names are supported by CSS.

Few of the examples are listed in the table below:

Color	Color Name
	Black
	Red
	Blue
	Green
	Aquamarine

Here is an example:

Open Compiler

<html><head><style>
   #colorkeyword{
  background-color: aqua;
  padding: 10px;   }
</style></head><body><h3>Color Keyword - example</h3><p>As the keyword passed is aqua, the background will appear as aqua colored..</p><div id="colorkeyword">
  This div element has a colored background based on the color keyword passed, i.e aqua.
   </div></body></html>

CSS Colors – Hexadecimal Codes

A hexadecimal is a 6 digit representation of a color. The first two digits(RR) represent a red value, the next two are a green value(GG), and the last are the blue value(BB).

A hexadecimal value can be taken from any graphics software like Adobe Photoshop, Jasc Paintshop Pro, or even using Advanced Paint Brush.

Each hexadecimal code will be preceded by a pound or hash sign ‘#’. Following are the examples of hexadecimal notation.

Note: To specify the hexadecimal codes, you can use upper case or lower case letters.

Color	Color Hexadecimal Code
	#000000
	#FF0000
	#00FF00
	#0000FF
	#FFFF00
	#00FFFF
	#FF00FF
	#C0C0C0
	#FFFFFF

Here is an example:

Open Compiler

<html><head><style>
   #hexcode {
  background-color: #00ff00;
  padding: 10px;}
</style></head><body><h3>Hexadecimal code - example</h3><p>As the hexadecimal code is #00ff00 the background will appear green.</p><div id="hexcode">
     This div element has a green background.
  &lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


CSS Colors - Short Hexadecimal Codes



This is a shorter form of the six-digit notation. In this format, each digit is replicated to arrive at an equivalent six-digit value. For example: #6A7 becomes #66AA77.



A hexadecimal value can be taken from any graphics software like Adobe Photoshop, Jasc Paintshop Pro, or even using Advanced Paint Brush.



Each short hexadecimal code will be preceded by a pound or hash sign '#'. Following are the examples of short hexadecimal notation.



Note: To specify the hexadecimal codes, you can use upper case or lower case letters.



Color Short Hexadecimal Code
  #000
  #F00
  #0F0
  #0FF
  #FF0
  #0FF
  #F0F
  #FFF



Here is an example:



Open Compiler



<html><head><style>
   #shorthex {
  background-color: #00f;
  padding: 10px;   }
</style></head><body><h3>Short Hexadecimal code - example</h3><p>As the short hexadecimal code is #00f the background will appear blue.</p><div id="shorthex">
     This div element has a blue background.
  &lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


CSS Colors - RGB Values




This color value is specified using the rgb( ) property.



It takes three values, one each for red, green, and blue.



The value can be an integer between 0 and 255 or a percentage.




NOTE: All the browsers does not support rgb() property of color so it is recommended not to use it.



Following is the example to show few colors using RGB values.



Color Color RGB
  rgb(0,0,0)
  rgb(255,0,0)
  rgb(0,255,0)
  rgb(0,0,255)
  rgb(255,255,0)
  rgb(0,255,255)
  rgb(255,0,255)
  rgb(192,192,192)
  rgb(255,255,255)



Here is an example:



Open Compiler



<html><head><style>
   #rgbvalue {
  background-color: rgb(255,0,255);
  padding: 10px;   }
</style></head><body><h3>RGB - example</h3><p>As the rgb(255,0,255) is set the background will appear accordingly.</p><div id="rgbvalue">
  This div element has a colored background based on the rgb values.
   </div></body></html>



CSS Colors - RGBA Values




This color value is specified using the rgba( ) property.



It takes four values, one each for red, green, and blue and the last value as the alpha (transparency) value.



The alpha value can be any value between 0 and 1.




NOTE: All the browsers do not support rgba() property of color so it is not recommended.



Following is the example to show few colors using RGBA values.



Color Color RGBA
  rgba(0,0,0,0)
  rgba(255,0,0,0.2)
  rgba(0,255,0,0.3)
  rgba(0,0,255,0.5)
  rgba(255,255,0,0.7)
  rgba(0,255,255,0.1)
  rgba(255,0,255,1)
  rgba(192,192,192,0.4)
  rgba(255,255,255,1)



Here is an example:



Open Compiler



<html><head><style>
   #rgbavalue {
  background-color: rgba(255,0,255,0.2);
  padding: 10px;   }
</style></head><body><h3>RGBA - example</h3><p>As the rgba(255,0,255,0.2) is set the background will appear with transparency value of 0.2.</p><div id="rgbavalue">
  This div element has a colored background based on the rgba values.
   </div></body></html>



CSS Colors - HSL Values




This color value is specified using the hsl() function.



HSL stands for hue, saturation and lightness.



Hue is represented in degrees (0-360), saturation and lightness are represented as percentages (0% - 100%).




Following is the example to show few colors using HSL property.



Color Color HSL
  hsl(0,0%,50%)
  hsl(255,80%,70%)
  hsl(290,100%,60%)
  hsl(360,70%,20%)
  hsl(89,80%,67%)



Here is an example:



<html><head><style>
   #hslvalue {
  background-color: hsl(355,70%,50%);
  padding: 10px;}
</style></head><body><h3>HSL - example</h3><p>As the hsl(355,70%,50%) is set the background will appear based on the hsl values passed.</p><div id="hslvalue">
  This div element has a colored background based on the hsl values hsl(355,70%,50%).
   </div></body></html>



CSS Colors - HSLA Values




This color value is specified using the hsl() function.



HSLA stands for hue, saturation, lightness and alpha.



It takes four values, first for hue, second for saturation, third for lightness and fourth is the alpha (transparency) value.



Hue is represented in degrees (0-360), saturation and lightness are represented as percentages (0% - 100%), and alpha value can be in between 0 and 1.




Following is the example to show few colors using HSLA property.



Color Color HSLA
  hsla(0,0%,50%,0.5)
  hsla(255,80%,70%,1)
  hsla(290,100%,60%,0.2)
  hsla(360,70%,20%,0.4)
  hsla(89,80%,67%,0.9)



Here is an example:



<html><head><style>
   #hslavalue {
  background-color: hsla(355,70%,50%,0.4);
  padding: 10px;   }
</style></head><body><h3>HSLA - example</h3><p>As the hsla(355,70%,50%,0.4) is set the background will appear based on the hsla values passed, with high transparency.</p><div id="hslavalue">
  This div element has a colored background based on the hsl values hsla(355,70%,50%,0.4).
   </div></body></html>



CSS Colors - currentcolor keyword



The currentcolor keyword signifies the value of the color property of an element. It can be passed to any other styling property using the keyword currentcolor.



Here is an example:



<html><head><style>
   #currcolor {
  color: red;
  border: 5px solid currentcolor;   }
</style></head><body><h2>The currentcolor Keyword</h2><p>As the currentcolor keyword is used for border after color property is set as red, the border will also appear red.</p><div id="currcolor">
  This div element has a red text color and a red border.
   </div></body></html>



CSS Colors - Building Color Codes



You can build millions of color codes using our Color Code Builder. Check the HTML Color Code Builder.



To use this tool, you would need a Java Enabled Browser.



CSS Colors - Browser Safe Colors



Here is the list of 216 colors which are supposed to be most safe and computer independent colors. These colors vary from hexa code 000000 to FFFFFF. These colors are safe to use because they ensure that all computers would display the colors correctly when running a 256 color palette −



000000 000033 000066 000099 0000CC 0000FF
003300 003333 003366 003399 0033CC 0033FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
330000 330033 330066 330099 3300CC 3300FF
333300 333333 333366 333399 3333CC 3333FF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF



CSS Colors - Related Properties



All the properties related to color are listed in the table below:



Property Description
opacity Sets the transparency level of an element.
hue Represents the hue angle of an element.
color Sets the foreground of an element's text and text decoration.
background-color Sets the color of the background.
border-color Sets the color of the border of an element.
box-shadow Adds a shadow effect around an element.
outline-color Sets the color of the outline around an element.
text-shadow Adds shadow to the text of an element.

Color	Short Hexadecimal Code
	#000
	#F00
	#0F0
	#0FF
	#FF0
	#0FF
	#F0F
	#FFF

Color	Color RGB
	rgb(0,0,0)
	rgb(255,0,0)
	rgb(0,255,0)
	rgb(0,0,255)
	rgb(255,255,0)
	rgb(0,255,255)
	rgb(255,0,255)
	rgb(192,192,192)
	rgb(255,255,255)

Color	Color RGBA
	rgba(0,0,0,0)
	rgba(255,0,0,0.2)
	rgba(0,255,0,0.3)
	rgba(0,0,255,0.5)
	rgba(255,255,0,0.7)
	rgba(0,255,255,0.1)
	rgba(255,0,255,1)
	rgba(192,192,192,0.4)
	rgba(255,255,255,1)

Color	Color HSL
	hsl(0,0%,50%)
	hsl(255,80%,70%)
	hsl(290,100%,60%)
	hsl(360,70%,20%)
	hsl(89,80%,67%)

Color	Color HSLA
	hsla(0,0%,50%,0.5)
	hsla(255,80%,70%,1)
	hsla(290,100%,60%,0.2)
	hsla(360,70%,20%,0.4)
	hsla(89,80%,67%,0.9)

Property	Description
opacity	Sets the transparency level of an element.
hue	Represents the hue angle of an element.
color	Sets the foreground of an element's text and text decoration.
background-color	Sets the color of the background.
border-color	Sets the color of the border of an element.
box-shadow	Adds a shadow effect around an element.
outline-color	Sets the color of the outline around an element.
text-shadow	Adds shadow to the text of an element.

August 20, 2025

Multiple Backgrounds

In CSS, you can use multiple background images for an element. First background should be layered on top, and the last background should be layered behind. Only the last background can have a background color.

Syntax

.multibackgrounds {
   background:
  background1,
  background2,
  /* , */ backgroundN;}

You can use shorthand and individual background properties, excluding background-color.

The following background properties can be provided as a list, one for each background: background, background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size.

CSS Multiple Backgrounds – Using background-image property

The following example demonstrates adding two background images using background-image property, where the first image is stacked on top and the second is behind it −

<html><head><style>
   .multibackgrounds {
  background-image: url(images/logo.png), url(images/see.jpg);
  background-position: left top, right top;
  background-repeat: no-repeat, repeat;
  padding: 70px;   }
</style></head><body><div class="multibackgrounds"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p></div></body></html>

CSS Multiple Backgrounds – Using background-size Property

The following example demonstrates the use of multiple background images of different sizes using background-size property. The first image’s size is 150px, and the second image’s size is 300px −

<html><head><style>
   .multibackgrounds{
  background-image: url(images/logo.png), url(images/see.jpg);
  background-position: left top, right top;
  background-repeat: no-repeat, repeat;
  padding: 70px;   }
   .multibackgrounds-size {
  background-image: url(images/logo.png), url(images/see.jpg);
  background-position: left top, right top;
  background-repeat: no-repeat, repeat;
  background-size: 150px, 300px;
  padding: 70px;   }
</style></head><body><h3>Without Sizing</h3><div class="multibackgrounds"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p></div><br><h3>With Sizing</h3><div class="multibackgrounds-size"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p></div></body></html>

CSS Multiple Backgrounds – Using background Property

The following example demonstrates addition of three background images using the shorthand property background −

<html><head><style>
   .multibackgrounds-size {
  background: url(images/logo.png),  url(images/pink-flower.jpg), url(images/see.jpg);
  background-position: left top, center, right top;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 150px, 100px, 550px;
  padding: 70px;
  color: yellow;   }
</style></head><body><div class="multibackgrounds-size"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p></div></body></html>

CSS Multiple Backgrounds – Full Size Image

The following example demonstrates full sized background image, set using background-size: cover property −

<html><head><style> 
   html { 
  background: url(images/red-flower.jpg) no-repeat center fixed; 
  background-size: cover;
  color: yellow;    }
</style></head><body><h1>Red Flower Image</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p></body></html>

CSS Multiple Backgrounds – Hero Image

The following example demonstrates the setting of a hero image, refers to a large image with text using different background properties on <div> −

<html><head><style>
   .background-img {
  background: url(images/see.jpg) no-repeat center; 
  background-size: cover;
  height: 300px;
  position: relative;   }
   .background-text {
  text-align: center;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: red;   }
   button {
     background-color: yellow;
     padding: 10px;   }
</style></head><body><div class="background-img"><div class="background-text"><h1>See Image</h1><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p><button>Click Me</button></div></div></body></html>

CSS Multiple Backgrounds – Using background-origin Property

The following example demonstrates how the background image is positioned within a box using background-origin property −

<html><head><style>
   div {
  width: 200px;
  height: 150px;
  border: 7px solid blue;
  padding: 30px;
  background: url(images/pink-flower.jpg);
  background-repeat: no-repeat;
  margin: 10px;   }
   P {
  color: yellow;   }
   h3 {
  color: red;   }
   .box1 {
  background-origin: padding-box;   }
   .box2 {
  background-origin: border-box;   }
   .box3 {
  background-origin: content-box;   }
</style></head><body><div class="box1"><h3>background-origin: padding-box</h3><p>Background image is positioned relative to the padding box.</p></div><div class="box2"><h3>background-origin: border-box</h3><p>Background image is positioned relative to the border box.</p></div><div class="box3"><h3>background-origin: content-box</h3><p>Background image is positioned relative to the content box.</p></div></body></html>

CSS Multiple Backgrounds – Using background-clip Property

The following example demonstrates how the background image should be displayed within box using background-clip property −

<html><head><style>  
   p {
  width: 200px;
  height: 150px;
  border: 8px solid blue;
  margin: 10px;
  padding: 30px;
  color: yellow;
  background: url(images/pink-flower.jpg);   }
   .box1 {
  background-clip: border-box;   }
   .box2 {
  background-clip: padding-box;   }
   .box3 {
  background-clip: content-box;   }
</style></head><body><p class="box1">Background image is applied to the entire element.</p><p class="box2">Background image is applied to the padding area.</p><p class="box3">Background image is applied only to the content area.</p></body></html>

CSS Multiple Backgrounds – Related Properties

All the properties related to background are listed in the table below:

Properties	Description
background	Shorthand for background related properties.
background-attachment	Specifies the position of the background relative to the viewport, either fixed or scrollable.
background-clip	Controls how far a background image extends beyond the element’s padding or content box.
background-image	Sets one or more background image(s) on an element.
background-origin	Sets the origin of the background.
background-position	Sets the initial position of each image in a background.
background-repeat	Controls the repetition of an image in the background.
background-size	Controls the size of the background image.

August 20, 2025

Border Images

CSS border-images properties are used to create custom borders by setting image as border around any element.

The border-image property takes the image and slices it into nine sections(3×3). It then places the corners at the corner of the border, and the edges are repeated or stretched as you specify. Middle part of image will be ignored.

Border Image

Example of Image as Border
CSS Border Image Source
CSS Border Image Slice
CSS Border Image Width
CSS Border Image Outset

CSS Border Image Repeat
Border Image Shorthand
CSS Gradient as Border Images
Border Image All Properties

Example of Image as Border

The following code shows a basic example of how to set image as border.

Example

<!DOCTYPE html><html><head><style>
    div{
        background-color: #f0f0f0;
        border: 20px solid transparent;
        border-image: url(/css/images/border.png) 40;
        padding: 20px;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div&gt;&lt;p&gt;
        This is an example of setting a 
        border image using CSS
    &lt;/p&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


CSS Border Image Source



The CSS border-image-source property specifies the source (url) of an image to be passed as a border to an element.



Example



<!DOCTYPE html><html><head><style>
    div{
        background-color: #f0f0f0;
        border: 20px solid transparent;
        border-image-source: url(/css/images/border.png);
        padding: 20px;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div&gt;&lt;p&gt;
        This is an example of setting border image using 
        border image source.
    &lt;/p&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


CSS Border Image Slice



The border-image-slice property defines how the image is sliced into regions, which are then used to draw the borders.



The following diagram demonstrates how image is sliced to make border. The image is divided into 9 sections: four corners, four edges, and the center.







The value in the 'border-image-slice' property specifies how far inward from the edges of the image the slicing should occur. It essentially defines the size of the areas that will be used to create the border.



The offset for border-image-slice can be provided in terms of percentage or length units but percentages are highly recommended.



Example



<!DOCTYPE html><html><head><style>
    div{
        background-color: #f0f0f0;
        border: 20px solid transparent;
        border-image-source: url(/css/images/scenery2.jpg);
        border-image-slice: 25%;
        padding: 15px;
        width: 50%
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div&gt;&lt;p&gt;
        See how border is set for this div...
    &lt;/p&gt;&lt;/div&gt;&lt;p&gt; Here is full image for your reference: &lt;/p&gt;&lt;img src="/css/images/scenery2.jpg" height="160px"&gt;&lt;/body&gt;&lt;/html&gt;</pre>


CSS Border Image Width



The border-image-width property is used to specify the width of the image to be set as a border.



Example



<!DOCTYPE html><html><head><style>
    div{
        background-color: #f0f0f0;
        border: 20px solid transparent;
        border-image-source: url(/css/images/border.png);
        border-image-width: 5px;
        border-image-slice: 25%;
        padding: 5px;
        margin: 20px;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div&gt;
    border-image-width: 5px;
&lt;/div&gt;&lt;div style="border-image-width: 10px;"&gt;
    border-image-width: 10px;
&lt;/div&gt;&lt;div style="border-image-width: 15px;"&gt;
    border-image-width: 15px;
&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


CSS Border Image Outset



The border-image-outset property is used to specify gap between element and border-image. This property pushes the border image outside, beyond the border box.



Example



<!DOCTYPE html><html><head><style>
    div{
        background-color: grey;
        border: 20px solid transparent;
        border-image-source: url(/css/images/border.png);
        border-image-width: 10px;
        border-image-slice: 25%;
        border-image-outset: 0px;
        padding: 5px;
        width: 80%;
        margin: 10px 15px 60px;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div&gt;
    border-image-outset: 0px;
&lt;/div&gt;&lt;div style="border-image-outset: 20px;"&gt;
    border-image-outset: 20px;
&lt;/div&gt;&lt;div style="border-image-outset: 25px;"&gt;
    border-image-outset: 25px;   
&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


CSS Border Image Repeat



The border-image-repeat property in used to repeating and stretching nature of image around border. By default the border image gets stretched along the sides.



The value repeat for this property, repeats the image specified along the sides of the border until the whole length and width got filled.



It can also take the value as round, apart from stretch and repeat.



Example



<!DOCTYPE html><html><head><style>
    div{
        background-color: #f0f0f0;
        border: 20px solid transparent;
        border-image-source: url(/css/images/border.png);
        border-image-slice: 25%;
        border-image-repeat: repeat;
        padding: 20px;
        width: 80%;
        margin: 10px 15px 60px;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div&gt;
    Border Image Repeat
&lt;/div&gt;&lt;div style="border-image-repeat: stretch;"&gt;
    Border Image Stretch
&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Border Image Shorthand Property



The border-image shorthand property allows you to set all the properties related to border images in one declaration.



border-image: image-source | image-slice | image-repeat;



Following example shows how to use this property.



Example



<!DOCTYPE html><html><head><style>
    div{
        background-color: #f0f0f0;
        border: 20px solid transparent;
        border-image: url('/css/images/border.png') 30 round;
        padding: 20px;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div&gt;&lt;p&gt;
        This is an example of border shorthand property....
    &lt;/p&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


CSS Gradient as Border Images



CSS gradients can also be used to set the border of an element. There are three types of gradients supported: linear, radial and conic.



Following example shows how to use this property.



Example



<!DOCTYPE html><html><head><style>
    div{
        background-color: #f0f0f0;
        border: 20px solid transparent;
        border-image: linear-gradient(45deg, green, yellow) 1;
        padding: 20px;
        margin: 20px;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div&gt;
    Border image linear gradient.
&lt;/div&gt;&lt;div style="border-image: radial-gradient(green, yellow) 1;"&gt;
    Border image radial gradient.
&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


CSS Border Images All Properties



All the properties related to border-images are listed in the table below:



Property Description Example
border-image A shorthand property for setting border image. Try It
border-image-outset Sets the image outset i.e how much the border image area extends beyond the border box. Try It
border-image-repeat Determines whether the border image should be repeated, rounded, spaced or stretched. Try It
border-image-source Sets the source/path of an image to be passed as a border to an element. Try It
border-image-slice Shows how to slice up an image in a border. Try It
border-image-width Sets the width of the image to be set as a border. Try It

Property	Description	Example
border-image	A shorthand property for setting border image.	Try It
border-image-outset	Sets the image outset i.e how much the border image area extends beyond the border box.	Try It
border-image-repeat	Determines whether the border image should be repeated, rounded, spaced or stretched.	Try It
border-image-source	Sets the source/path of an image to be passed as a border to an element.	Try It
border-image-slice	Shows how to slice up an image in a border.	Try It
border-image-width	Sets the width of the image to be set as a border.	Try It

August 20, 2025

Rounded Corners

CSS rounded corners are created using the border-radius property. This property allows you to specify the radius of the corners of an element’s outer border edge.

Possible Values

<length>: Size of circle radius is denoted, using length values. Negative values are not valid.
<percentage>: Size of circle radius is denoted, using percentage values.
- Horizontal axis percentage is referred to the width of the box.
- Vertical axis percentage is referred to the height of the box.
- Negative values are not valid.

Applies to

All the HTML elements, except for table and inline-table elements with border-collapse set to collapse. Applies to ::first-letter.

DOM Syntax

object.style.borderRadius = "length";

The following diagram demonstrates the different border-radius corners for reference:

The following table shows the possible values for rounded corners as follows −

Value		Description
radius		Is a <length> or a <percentage> that sets the radius for all four corners of the element. It is used only in the one-value syntax.
top-left and bottom-right		Is a <length> or a <percentage> that sets the radius for the top-left and bottom-right corners of the element. It is used only in the two-value syntax.
top-right and bottom-left		Is a <length> or a <percentage> that sets the radius for the top-right and bottom-left corners of the element. It is used only in the two- and three-value syntaxes.
top-left		Is a <length> or a <percentage> that sets the radius for the top-left corner of the element. It is used on three and four value syntaxes.
top-right		Is a <length> or a <percentage> that sets the radius for the top-right corners of the element. It is used only in the four-value syntax.
bottom-right		Is a <length> or a <percentage> that sets the radius for the bottom-right corners of the element. It is used only in the three and four-value syntaxes.
bottom-left		Is a <length> or a <percentage> that sets the radius for the bottom-left corners of the element. It is used only in the four-value syntax.

Individual border radius properties, such as border-top-left-radius, cannot inherit from their parent element. Instead, you must use the individual longhand properties to set the border radius of each corner.

CSS Border Radius – Length Value

The following example demostrates how to use the border-radius property to create rounded corners for all four corners of a box −

<html><head><style>
   .rounded-box {
  width: 200px;
  height: 100px;
  background-color: pink;
  line-height: 100px;
  border-radius: 20px;   }
</style></head><body><div class="rounded-box">
  This is a rounded corner box.
   </div></body></html>

You can use the border-radius property to create rounded corners on box, borders, and images.

Here is an example −

<html><head><style>
   .rounded-box {
  width: 200px;
  height: 100px;
  background-color: pink;
  border-radius: 20px;
  margin-bottom: 10px;   }
   .border-box {
  width: 200px;
  height: 100px;
  border-radius: 2em;
  border: 3px solid green; 
  margin-bottom: 20px;      }
   .img-border-radius {
  background-image: url(images/tree.jpg);
  background-size: 100% 100%;
  border-radius: 20%;
  width: 200px;
  height: 150px;   }
</style></head><body><div class="rounded-box">
  This is a rounded corner box.   </div><div class="border-box">
  This is a rounded corner box.   </div><div class="img-border-radius">
  This is a rounded corner image.
   </div></body></html>

You can use the border-radius property to create different rounded corner styles on an element.

Here is an example −

<html><head><style>
   .rounded-box {
  width: 200px;
  height: 100px;
  background-color: pink;
  margin: 10px;
  padding: 5px;   }
   .rounded-box.tl {
  border-radius: 30px 0 0 0;   }
   .rounded-bo x.tr {
  border-radius: 0 2em 0 0;   }
   .rounded-box.bl {
  border-radius: 0 0 0 15%;   }
   .rounded-box.br {
  border-radius: 0 0 30px 0;   }
   .rounded-box.tl-br {
  border-radius:  2em 0 2em 0;   }
   .rounded-box.tr-bl {
  border-radius: 0 15% 0 15%;   }
</style></head><body><div class="rounded-box tl">
  top-left rounded corner.   </div><div class="rounded-box tr">
  top-right rounded corner.   </div><div class="rounded-box bl">
  bottom-left rounded corner.   </div><div class="rounded-box br">
  bottom-right rounded corner.   </div><div class="rounded-box tl-br">
  top-left and bottom-right rounded corners.   </div><div class="rounded-box tr-bl">
  top-right and bottom-left rounded corners.
   </div></body></html>

CSS Rounded Corner Images

You can use the border-radius property to create different rounded corner styles on elements.

Here is an example −

<html><head><style>
   img {
  width: 200px;
  height: 100px;
  margin: 10px;   }
   .top-left {
  border-radius: 30px 0 0 0;   }
   .top-right {
  border-radius: 0 2em 0 0;   }
   .bottom-left {
  border-radius: 0 0 0 15%;   }
   .bottom-right {
  border-radius: 0 0 30px 0;   }
   .tl-br {
  border-radius:  2em 0 2em 0;   }
   .tr-bl {
  border-radius: 0 15% 0 15%;   }
</style></head><body><h4>top-left rounded corner.</h4><img class="top-left" src="images/tree.jpg" /><h4>top-right rounded corner.</h4><img class="top-right" src="images/tree.jpg" /><h4> bottom-left rounded corner.</h4><img class="bottom-left" src="images/tree.jpg" /><h4>bottom-right rounded corner.</h4><img class="bottom-right" src="images/tree.jpg" /><h4>top-left and bottom-right rounded corners.</h4><img class="tl-br" src="images/tree.jpg" /><h4>top-right and bottom-left rounded corners.</h4><img class="tr-bl" src="images/tree.jpg" /></body></html>

We can create a circle and an ellipse using the CSS border-radius property.

Here is an example −

<html><head><style>
   .rounded-circle {
  width: 100px;
  height: 100px;
  background-color: pink;
  text-align: center;
  border-radius: 50%;   }
   .rounded-ellipse {
  width: 200px;
  height: 100px;
  background-color: pink;
  text-align: center;
  border-radius: 50%;   }
</style></head><body><div class="rounded-circle">
  circle   </div><div class="rounded-ellipse">
  ellipse
   </div></body></html>

CSS border-radius – Related Properties

Following is the list of CSS properties related to border-radius:

property	value
border-top-left-radius	Sets the roundness of the top-left corner of an element’s border.
border-top-right-radius	Sets the roundness of the top-right corner of an element’s border.
border-bottom-right-radius	Sets the roundness of the bottom-right corner of an element’s border.
border-bottom-left-radius	Sets the roundness of the bottom-left corner of an element’s border.
border-start-start-radius	Sets the roundness of the block-start and inline-start corner of an element’s border.
border-start-end-radius	Sets the roundness of the block-start and inline-end corner of an element’s border.
border-end-start-radius	Sets the roundness of the block-end and inline-start corner of an element’s border.
border-end-end-radius	Sets the roundness of the block-end and inline-end corner of an element’s border.

August 20, 2025

3D Transforms

CSS transform are used to animate elements in three-dimensional space by using properties like translate, scale and rotate. In other words, these functions let you rotate, scale, and move elements along the X, Y, and Z axes, adding depth and perspective to your designs.

2D Transform

3D Transform

CSS 3D Translate()
CSS 3D Rotate()
CSS 3D Scale()
CSS 3D Transform Related Properties

CSS 3D Translate()

CSS translate3d() function moves an element in 3D space by specifying offsets along the X, Y, and Z axes, where the Z-axis controls depth (distance towards or away from the viewer). The following example shows a box that moves in 3D space when hovered over. The perspective property is used to give a sense of depth for 3d effect.

Example

<!DOCTYPE html><html lang="en"><head><style>
    body {
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f0f0f0;
        font-family: Arial, sans-serif;
    }
    /* Container with Perspective */
    .container {
        perspective: 800px; 
    }
    /* The Box Element */
    .box {
        width: 200px;
        height: 200px;
        background-color: #4CAF50;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.5em;
        border-radius: 10px;
        /* Initial 3D Transformation */
        transform: translate3d(50px, 50px, 100px) 
                    rotateX(15deg) rotateY(25deg);
        transition: transform 0.6s ease;
    }
    /* Hover State with Different 3D Transformation */
    .box:hover {
        transform: translate3d(-50px, -50px, -100px);
        background-color: #2ecc71;
        cursor: pointer;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="container"&gt;&lt;div class="box"&gt;
        3D Box
    &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


CSS 3D Rotate()



CSS rotate3d() function allows you to rotate an element around a specified axis in 3D space by defining the X, Y, and Z components of the rotation vector and the angle of rotation. Here is an example showing a box that rotates in 3D space when we hover over it, creating a dynamic visual effect.



Example



<!DOCTYPE html><html lang="en"><head><style>
    body {
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f0f0f0;
        font-family: Arial, sans-serif;
    }
    /* Container with Perspective */
    .container {
        perspective: 800px; 
    }
    /* The Box Element */
    .box {
        width: 200px;
        height: 200px;
        background-color: #4CAF50;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.5em;
        border-radius: 10px;
        /* Initial 3D Rotation */
        transform: rotate3d(1, 1, 1, 45deg);
        transition: transform 0.6s ease;
    }
    /* Hover State with Different 3D Rotation */
    .box:hover {
        transform: rotate3d(1, 1, 0, -45deg);
        background-color: #2ecc71;
        cursor: pointer;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="container"&gt;&lt;div class="box"&gt;
        3D Box
    &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


CSS 3D Scale()



CSS scale3d() function scales an element in 3D space by specifying scaling factors along the X, Y, and Z axes, allowing for uniform or non-uniform scaling. The following example shows a box that scales in 3D space when hovered over, creating a visually appealing zoom effect.



Example



<!DOCTYPE html><html lang="en"><head><style>
    body {
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f0f0f0;
        font-family: Arial, sans-serif;
    }
    /* Container with Perspective */
    .container {
        perspective: 800px; 
    }
    /* The Box Element */
    .box {
        width: 150px;
        height: 150px;
        background-color: #4CAF50;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.5em;
        border-radius: 10px;
        /* Initial 3D Scaling */
        transform: scale3d(1, 1, 1) rotate3d(1, 1, 0, -45deg);
        transition: transform 0.6s ease;
    }
    /* Hover State with Different 3D Scaling */
    .box:hover {
        transform:  scale3d(1.5, 1.5, 0.5);
        background-color: #2ecc71;
        cursor: pointer;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="container"&gt;&lt;div class="box"&gt;
        3D Box
    &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


CSS 3D Transform Related Properties



The following table lists all the various properties that are used to transform the elements in the three-dimensional space.



Property Description Example
backface-visibility CSS backface-visibility property sets the visibility of back face of an element to the user. Try It
perspective CSS perspective property determines the distance between the z=0 plane and the user. Try It
perspective-origin CSS perspective-origin property determines the position at which the user is looking at the 3D-positioned element. Try It
rotate3d() CSS rotate3d() function rotates an element in the three-dimensional space. Try It
scale3d() CSS scale3d() function scales an element in the three-dimensional space. Try It
transform CSS transform property transforms an element in the three-dimensional space. Try It
translate css translate property translates an element in three-dimensional space. Try It
rotateZ() CSS rotateZ() function rotates an element around the z-axis. Try It
scaleZ() CSS scaleZ() function scales an element up or down along the z-axis. Try It
translateZ() CSS translateZ() function translates an element up or down along the z-axis. Try It

Property	Description	Example
backface-visibility	CSS backface-visibility property sets the visibility of back face of an element to the user.	Try It
perspective	CSS perspective property determines the distance between the z=0 plane and the user.	Try It
perspective-origin	CSS perspective-origin property determines the position at which the user is looking at the 3D-positioned element.	Try It
rotate3d()	CSS rotate3d() function rotates an element in the three-dimensional space.	Try It
scale3d()	CSS scale3d() function scales an element in the three-dimensional space.	Try It
transform	CSS transform property transforms an element in the three-dimensional space.	Try It
translate	css translate property translates an element in three-dimensional space.	Try It
rotateZ()	CSS rotateZ() function rotates an element around the z-axis.	Try It
scaleZ()	CSS scaleZ() function scales an element up or down along the z-axis.	Try It
translateZ()	CSS translateZ() function translates an element up or down along the z-axis.	Try It

August 19, 2025

2D Transforms

CSS transforms are used to modify the element’s shape and sizes and are responsible for movements of elements in two-dimensional space using functions like translate(), scale(), rotate(), and skew(). These functions allow you to move, scale, rotate, and skew elements along the X and Y axes, creating various visual effects and manipulations.

2D Transform

3D Transform

CSS 2D Translate
CSS 2D Rotate
CSS 2D Scale
CSS 2D Skew
CSS 2D Transform Related Functions

CSS 2D Translate

CSS translate() function moves an element along the X and Y axes.

Example

The following example shows a box that moves along these axes when hovered over.

<!DOCTYPE html><html lang="en"><head><style>
    body {
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f0f0f0;
        font-family: Arial, sans-serif;
    }
    /* The Box Element */
    .box {
        width: 200px;
        height: 200px;
        background-color: #4CAF50;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.5em;
        border-radius: 10px;
        /* Initial 2D Translation */
        transform: translate(50px, 50px);
        transition: transform 0.6s ease;
    }
    /* Hover State with Different 2D Translation */
    .box:hover {
        transform: translate(-50px, -50px);
        background-color: #2ecc71;
        cursor: pointer;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="box"&gt;
    2D Box
&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


CSS 2D Rotate



CSS rotate() function rotates an element around a specified point on the 2D plane.



Example



The following example shows a box that rotates when hovered over, creating a dynamic effect.



<!DOCTYPE html><html lang="en"><head><style>
    body {
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f0f0f0;
        font-family: Arial, sans-serif;
    }
    /* The Box Element */
    .box {
        width: 200px;
        height: 200px;
        background-color: #4CAF50;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.5em;
        border-radius: 10px;
        /* Initial 2D Rotation */
        transform: rotate(15deg);
        transition: transform 0.6s ease;
    }
    /* Hover State with Different 2D Rotation */
    .box:hover {
        transform: rotate(-15deg);
        background-color: #2ecc71;
        cursor: pointer;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="box"&gt;
    2D Box
&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


CSS 2D Scale



CSS scale() function scales an element along the X and Y axes.



Example



The following example shows a box that scales up and down when hovered over, creating a zoom effect.



<!DOCTYPE html><html lang="en"><head><style>
    body {
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f0f0f0;
        font-family: Arial, sans-serif;
    }
    /* The Box Element */
    .box {
        width: 150px;
        height: 150px;
        background-color: #4CAF50;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.5em;
        border-radius: 10px;
        /* Initial 2D Scaling */
        transform: scale(1);
        transition: transform 0.6s ease;
    }
    /* Hover State with Different 2D Scaling */
    .box:hover {
        transform: scale(1.5);
        background-color: #2ecc71;
        cursor: pointer;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="box"&gt;
    2D Box
&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


CSS 2D Skew



CSS skew() function skews an element along the X and Y axes.



Example



The following example shows a box that skews when hovered over, creating a slanted effect.



<!DOCTYPE html><html lang="en"><head><style>
    body {
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f0f0f0;
        font-family: Arial, sans-serif;
    }
    /* The Box Element */
    .box {
        width: 200px;
        height: 200px;
        background-color: #4CAF50;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.5em;
        border-radius: 10px;
        /* Initial 2D Skew */
        transform: skewX(10deg) skewY(10deg);
        transition: transform 0.6s ease;
    }
    /* Hover State with Different 2D Skew */
    .box:hover {
        transform: skewX(-10deg) skewY(-10deg);
        background-color: #2ecc71;
        cursor: pointer;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="box"&gt;
    2D Box
&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


CSS 2D Transform Related Functions



The following table lists all the various functions that are used to transform elements in the two-dimensional space.



Function Description Example
translate() CSS translate() function translates an element along the X and Y axes. Try It
rotate() CSS rotate() function rotates an element around a point in 2D space. Try It
scale() CSS scale() function scales an element along the X and Y axes. Try It
skew() CSS skew() function skews an element along the X and Y axes. Try It
transform() CSS transform() function applies a 2D or 3D transformation to an element. Try It

Function	Description	Example
translate()	CSS translate() function translates an element along the X and Y axes.	Try It
rotate()	CSS rotate() function rotates an element around a point in 2D space.	Try It
scale()	CSS scale() function scales an element along the X and Y axes.	Try It
skew()	CSS skew() function skews an element along the X and Y axes.	Try It
transform()	CSS transform() function applies a 2D or 3D transformation to an element.	Try It

August 19, 2025

000000	000033	000066	000099	0000CC	0000FF
003300	003333	003366	003399	0033CC	0033FF
006600	006633	006666	006699	0066CC	0066FF
009900	009933	009966	009999	0099CC	0099FF
00CC00	00CC33	00CC66	00CC99	00CCCC	00CCFF
00FF00	00FF33	00FF66	00FF99	00FFCC	00FFFF
330000	330033	330066	330099	3300CC	3300FF
333300	333333	333366	333399	3333CC	3333FF
336600	336633	336666	336699	3366CC	3366FF
339900	339933	339966	339999	3399CC	3399FF
33CC00	33CC33	33CC66	33CC99	33CCCC	33CCFF
33FF00	33FF33	33FF66	33FF99	33FFCC	33FFFF
660000	660033	660066	660099	6600CC	6600FF
663300	663333	663366	663399	6633CC	6633FF
666600	666633	666666	666699	6666CC	6666FF
669900	669933	669966	669999	6699CC	6699FF
66CC00	66CC33	66CC66	66CC99	66CCCC	66CCFF
66FF00	66FF33	66FF66	66FF99	66FFCC	66FFFF
990000	990033	990066	990099	9900CC	9900FF
993300	993333	993366	993399	9933CC	9933FF
996600	996633	996666	996699	9966CC	9966FF
999900	999933	999966	999999	9999CC	9999FF
99CC00	99CC33	99CC66	99CC99	99CCCC	99CCFF
99FF00	99FF33	99FF66	99FF99	99FFCC	99FFFF
CC0000	CC0033	CC0066	CC0099	CC00CC	CC00FF
CC3300	CC3333	CC3366	CC3399	CC33CC	CC33FF
CC6600	CC6633	CC6666	CC6699	CC66CC	CC66FF
CC9900	CC9933	CC9966	CC9999	CC99CC	CC99FF
CCCC00	CCCC33	CCCC66	CCCC99	CCCCCC	CCCCFF
CCFF00	CCFF33	CCFF66	CCFF99	CCFFCC	CCFFFF
FF0000	FF0033	FF0066	FF0099	FF00CC	FF00FF
FF3300	FF3333	FF3366	FF3399	FF33CC	FF33FF
FF6600	FF6633	FF6666	FF6699	FF66CC	FF66FF
FF9900	FF9933	FF9966	FF9999	FF99CC	FF99FF
FFCC00	FFCC33	FFCC66	FFCC99	FFCCCC	FFCCFF
FFFF00	FFFF33	FFFF66	FFFF99	FFFFCC	FFFFFF

Category: Advanced Features

Syntax

Property Values

Examples of CSS Box Shadow Property

Box Shadow Property with Box Shadow

Example

Box Shadow Property with Blur

Example

Box Shadow Property with Spread Value

Example

Box Shadow Property with Color Value

Example

Box Shadow Property with Inset Value

Example

Box Shadow Property with Multiple Shadows

Example

What is CSS Gradient?

Table of Contents

Types of CSS Gradients

Linear Gradients

Syntax

Example

Radial Gradients

Syntax

Example

Conic Gradients

Syntax

Example

Gradients for Borders

Syntax

Example

Positioning Color Stops

Syntax

Example

Creating Hard Lines

Example

Color Bands Using Gradients

Syntax

Example

Stacked Gradients

Example

Related Functions

CSS Colors – Keyword

CSS Colors – Hexadecimal Codes

CSS Colors - Short Hexadecimal Codes

CSS Colors - RGB Values

CSS Colors - RGBA Values

CSS Colors - HSL Values

CSS Colors - HSLA Values

CSS Colors - currentcolor keyword

CSS Colors - Building Color Codes

CSS Colors - Browser Safe Colors

CSS Colors - Related Properties

Syntax

CSS Multiple Backgrounds – Using background-image property

CSS Multiple Backgrounds – Using background-size Property

CSS Multiple Backgrounds – Using background Property

CSS Multiple Backgrounds – Full Size Image

CSS Multiple Backgrounds – Hero Image

CSS Multiple Backgrounds – Using background-origin Property

CSS Multiple Backgrounds – Using background-clip Property

CSS Multiple Backgrounds – Related Properties

Table of Contents

Example of Image as Border

Example

CSS Border Image Source

Example

CSS Border Image Slice

Example

CSS Border Image Width

Example

CSS Border Image Outset

Example

CSS Border Image Repeat

Example

Border Image Shorthand Property

Example

CSS Gradient as Border Images

Example

CSS Border Images All Properties