Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
CSS Articles
Page 113 of 130
Types of Gradients in CSS
CSS gradients create smooth transitions between two or more specified colors. They are essential for modern web design, allowing you to create beautiful color transitions without using images. Syntax /* Linear Gradient */ background: linear-gradient(direction, color1, color2, ...); /* Radial Gradient */ background: radial-gradient(shape size at position, color1, color2, ...); Types of Gradients CSS provides two main types of gradients − Linear Gradients − Transitions along a straight line (down/up/left/right/diagonally) Radial Gradients − Transitions radiating from a center point in a circular or elliptical pattern Linear Gradient Example ...
Read MoreCSS3 Left to right Gradient
CSS3 left to right gradient creates a smooth color transition that flows horizontally from the left edge to the right edge of an element. This is achieved using the linear-gradient() function with the to right direction. Syntax selector { background: linear-gradient(to right, color1, color2, ...); } Example: Basic Left to Right Gradient The following example creates a red to blue gradient flowing from left to right − .gradient-box { height: 100px; ...
Read MoreCSS3 Multi color Gradients
CSS3 multi-color gradients allow you to create smooth transitions between multiple colors in a single gradient. Unlike simple gradients that use only two colors, multi-color gradients can include three or more colors to create vibrant, complex color effects. Syntax selector { background: linear-gradient(direction, color1, color2, color3, ...); } Example The following example demonstrates a multi-color linear gradient with seven colors − #grad { height: 100px; ...
Read MoreCSS3 Repeat Radial Gradients
The CSS repeating-radial-gradient() function creates a radial gradient that repeats in a circular pattern. Unlike regular radial gradients, the pattern repeats continuously from the center outward, creating concentric rings of color transitions. Syntax selector { background: repeating-radial-gradient(shape size at position, color-stop1, color-stop2, ...); } Possible Values ParameterDescription shapeOptional. circle or ellipse (default) sizeOptional. closest-side, farthest-side, closest-corner, farthest-corner positionOptional. Position of the center (e.g., center, top left) color-stopColor followed by optional position percentage or length Example: Basic Repeating Radial Gradient The following example creates a repeating radial ...
Read MoreCSS3 Radial Gradients
CSS3 radial gradients create smooth color transitions that emanate outward from a center point, forming circular or elliptical patterns. Unlike linear gradients that flow in straight lines, radial gradients spread from the center to the edges. Syntax selector { background: radial-gradient(shape size at position, color-stop1, color-stop2, ...); } Possible Values ParameterDescription shapecircle or ellipse (default: ellipse) sizeclosest-side, farthest-side, closest-corner, farthest-corner positioncenter, top, bottom, left, right, or specific coordinates color-stopColor and optional position (percentage or length) Example: Basic Radial Gradient The following example creates a simple radial ...
Read MoreCSS3 Linear gradients
CSS3 linear gradients allow you to create smooth transitions between two or more colors in a linear direction. Instead of using solid background colors, you can create beautiful gradients that transition from one color to another along a straight line. Syntax selector { background: linear-gradient(direction, color1, color2, ...); } Possible Values ParameterDescription directionOptional. Defines the direction (to top, to right, 45deg, etc.) color1, color2, ...Two or more colors for the gradient transition Example: Basic Linear Gradient The following example creates a linear gradient from pink to ...
Read MoreCSS3 Opacity property
The CSS3 opacity property controls the transparency level of an element. It allows you to make elements partially or completely transparent, where a value of 1 means completely opaque and 0 means completely transparent. Syntax selector { opacity: value; } Possible Values ValueDescription 0.0Completely transparent (invisible) 0.550% transparent 1.0Completely opaque (default) Example: Different Opacity Levels The following example demonstrates different opacity values applied to colored elements − .box { ...
Read MoreRotate transform the element by using x-axis with CSS3
The CSS rotateX() transform function rotates an element around its X-axis in 3D space. This creates a perspective effect where the element appears to flip forward or backward. Syntax transform: rotateX(angle); Where angle can be specified in degrees (deg), radians (rad), or turns. Example: Basic X-Axis Rotation The following example demonstrates how to rotate an element 45 degrees around the X-axis − .container { perspective: 1000px; margin: ...
Read MoreRotate div with skew x-axis using CSS
The CSS transform: skewX() property allows you to skew an element along the x-axis, creating a slanted or tilted effect. This transformation distorts the element horizontally while keeping the y-axis unchanged. Syntax selector { transform: skewX(angle); } Possible Values ValueDescription degAngle in degrees (positive values skew left, negative values skew right) radAngle in radians turnAngle in turns (1 turn = 360 degrees) Example The following example demonstrates how to apply skew transformation to a div element along the x-axis − ...
Read MoreA scale transform the element by using y-axis with CSS3
The scaleY() CSS function is used to scale an element along the y-axis (vertically). This transform function stretches or compresses the element's height while keeping its width unchanged. Syntax transform: scaleY(y); Here, y is a number representing the scaling factor to apply on the vertical axis of the element. Possible Values ValueDescription 1No scaling (original size) > 1Stretches the element vertically 0 to 1Compresses the element vertically 0Completely flattens the element negativeFlips and scales the element Example: Vertical Scaling The following example demonstrates how to scale elements along the ...
Read More