CSS Gradients
FlexBox Shadows Page 1 of 6
Table of Contents
CSS Gradients
Types of CSS Gradients:
1. Linear Gradient
2. Radial Gradient
3. Conic Gradient
CSS Shadows
1. Text-Shadow
2. Box-Shadow
CSS Positioning
Types of Positioning:
Positioning Examples:
CSS Transforms
Page 2 of 6
1. 2D Transforms
2. 3D Transforms
CSS Flexbox
1. Flex Container Properties:
2. Flex Items Properties:
References:
# CSS Gradients, Shadows, Positioning, Transforms & Flexbox
CSS Gradients
CSS gradients let you create smooth transitions between colors.
Types of CSS Gradients:
1. Linear Gradient (up/down/left/right/diagonal)
2. Radial Gradient (circular/elliptical from center)
3. Conic Gradient (rotated around a center point)
1. Linear Gradient
Creates a smooth transition between colors along a straight line.
Syntax:
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
Examples:
Page 3 of 6
background-image: linear-gradient(to right, red, blue); /* Left to right */
background-image: linear-gradient(45deg, red, yellow, green); /* Angle */
2. Radial Gradient
Creates a circular or elliptical color transition.
Syntax:
background-image: radial-gradient(shape size at position, color-stop1, color-stop2, ...);
Examples:
background-image: radial-gradient(circle, red, blue); /* Circular */
background-image: radial-gradient(ellipse at center, yellow, green, blue); /* Elliptical */
3. Conic Gradient
Colors rotate around a center point.
Syntax:
background-image: conic-gradient([from angle] [at position,] color1 degree, color2 degree, ...);
Example:
background-image: conic-gradient(from 90deg, red, yellow, green, blue);
CSS Shadows
CSS allows adding shadows to text and elements.
1. Text-Shadow
Adds shadow to text.
Syntax:
text-shadow: horizontal-offset vertical-offset blur-radius color;
Page 4 of 6
Example:
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
2. Box-Shadow
Adds shadow to an element.
Syntax:
box-shadow: horizontal-offset vertical-offset blur-radius spread-radius color;
Example:
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
CSS Positioning
Determines how elements are positioned in a document.
Types of Positioning:
1. Static (default)
2. Relative (relative to its normal position)
3. Absolute (relative to nearest positioned ancestor)
4. Fixed (relative to viewport)
5. Sticky (switches between relative and fixed)
Positioning Examples:
position: static; /* Default */
position: relative; /* Adjust using top, right, bottom, left */
position: absolute; /* Moves out of document flow */
position: fixed; /* Stays in the same place on scroll */
position: sticky; /* Sticks after scroll threshold */
CSS Transforms
Page 5 of 6
Transform elements using 2D and 3D transformations.
1. 2D Transforms
Syntax:
transform: translate(x, y) | rotate(angle) | scale(x, y) | skew(x, y);
Examples:
transform: translate(50px, 100px);
transform: rotate(45deg);
transform: scale(1.5, 1.5);
transform: skew(20deg, 10deg);
2. 3D Transforms
Syntax:
transform: rotateX(angle) | rotateY(angle) | rotateZ(angle);
Example:
transform: rotateY(180deg);
CSS Flexbox
Flexbox is a powerful layout system for aligning items easily.
1. Flex Container Properties:
display: flex; /* Enables flexbox */
flex-direction: row | row-reverse | column | column-reverse;
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: flex-start | flex-end | center | stretch | baseline;
flex-wrap: nowrap | wrap | wrap-reverse;
Example:
Page 6 of 6
.container {
display: flex;
justify-content: center;
align-items: center;
}
2. Flex Items Properties:
order: 1; /* Controls item order */
flex-grow: 1; /* Defines how much an item should grow */
flex-shrink: 1; /* Defines how much an item should shrink */
flex-basis: 100px; /* Defines the initial size */
align-self: auto | flex-start | flex-end | center | stretch;
Example:
.item {
flex-grow: 2;
flex-basis: 150px;
align-self: center;
}
References:
MDN Docs
W3Schools
CSS Tricks
This guide provides a simple, yet comprehensive approach to CSS fundamentals for real-world
applications. 🚀
