CSS Notes

Every topic: simple explanation first, then examples.

Module 01

Introduction to CSS

What CSS is, how to write it

Module 02

CSS Selectors

How to target HTML elements

Module 03

Colors, Backgrounds & Borders

Color formats, backgrounds, borders

Module 04

Typography & Text

Fonts, sizes, spacing

Module 05 ⭐

The Box Model

Most important concept in CSS

Module 06

Flexbox

1-direction layouts

Module 07

CSS Grid

2D row + column layouts

Module 08

Responsive Design

Works on mobile + desktop

Module 09

Animations & Transitions

Movement and motion in CSS

Module 10

Advanced CSS

Variables, shadows, gradients

Module 01

Introduction to CSS

HTML builds the structure of a page — headings, paragraphs, images. CSS is what makes it look good. CSS controls color, font, size, spacing, layout — everything visual. Without CSS, every page looks like a plain text document.

3 Ways to Add CSS

You can write CSS in three places. Each has a different use case:

Inline — written directly inside an HTML tag. Quick, but gets messy fast. Avoid for real projects.
Internal — written inside a <style> tag in the <head> of your HTML file. Good for small single-page experiments.
External — written in a separate .css file and linked to HTML. This is the correct, professional way. Use this always.

INLINE — avoid this

<h1 style="color: red; font-size: 32px;">Hello</h1>

INTERNAL — okay for small experiments

<style>
  h1 { color: red; }
</style>

EXTERNAL — use this always ✅

<!-- In your HTML head -->
<link rel="stylesheet" href="style.css">

/* In style.css */
h1 { color: red; }

✅

Best PracticeAlways use external CSS. It keeps HTML clean and lets you reuse the same styles across many pages.

How CSS is Written — The Syntax

Every CSS rule has two parts:

Selector — tells CSS which element to style (e.g. h1, .card)
Declaration block — the { } curly braces that contain one or more rules

Inside the block, each rule is written as: property: value;
The semicolon ; at the end of each rule is required.

CSS Syntax

selector {
  property: value;   /* one rule */
  property: value;   /* another rule */
}

/* Real example */
p {
  color: #333333;
  font-size: 16px;
}

What Does "Cascading" Mean?

The "C" in CSS stands for Cascading. It means when multiple CSS rules apply to the same element, CSS follows a priority order to decide which rule wins. We will cover this fully in Module 2 (Specificity).

Complete Example — Your First CSS File

index.html

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Hello, CSS!</h1>
  <p>This paragraph is styled with CSS.</p>
</body>
</html>

style.css

body {
  background-color: #f0f4f8;
  font-family: Arial, sans-serif;
  padding: 20px;
}

h1 {
  color: #c84b31;
  font-size: 36px;
}

p {
  color: #333333;
  font-size: 16px;
}

Live Result

Hello, CSS!

This paragraph is styled with CSS.

Module 02

CSS Selectors

A selector tells CSS which element to style. The better you understand selectors, the more precisely you can control your styles. This module covers every selector type you need to know.

Basic Selectors

There are 4 basic ways to select elements:

Universal ( * ) — selects every element on the page
Element — selects all elements of that type (e.g. all p tags)
Class ( . ) — selects elements that have a specific class attribute. Multiple elements can share a class.
ID ( # ) — selects the one element with that specific ID. IDs must be unique on a page.

CSS

/* Universal — selects everything */
* { margin: 0; padding: 0; }

/* Element — all p tags */
p { color: #333; }

/* Class — any element with class="btn" */
.btn { background: blue; color: white; }

/* ID — the one element with id="logo" */
#logo { font-size: 24px; }

Selector	Targets	Example
*	All elements	`* { margin: 0; }`
p	All <p> tags	`p { color: gray; }`
.card	Elements with class="card"	`.card { padding: 20px; }`
#logo	Element with id="logo"	`#logo { color: red; }`

Combining Selectors

You can combine selectors to be more specific about what you target. This is very useful in real projects.

Grouping (comma) — apply same styles to multiple selectors
Descendant (space) — target an element only when it is inside another element
Direct child (>) — target only direct children, not nested grandchildren
Adjacent sibling (+) — target the element that immediately follows another

CSS

/* Grouping — same style for h1, h2, h3 */
h1, h2, h3 { font-family: Georgia, serif; }

/* Descendant — only p tags that are inside .card */
.card p { color: gray; }

/* Direct child — only li that are direct children of .nav */
.nav > li { list-style: none; }

/* Adjacent sibling — h2 that comes directly after h1 */
h1 + h2 { margin-top: 0; }

Pseudo-classes

A pseudo-class styles an element based on its state — something the user is doing, or a position in a list. You write it with a colon after the selector: element:state. Common pseudo-classes: :hover (mouse over), :first-child, :last-child, :nth-child(), :visited, :focus.

CSS

/* When mouse hovers over a button */
button:hover { background: darkblue; }

/* The first item in any list */
li:first-child { font-weight: bold; }

/* Every even-numbered table row */
tr:nth-child(even) { background: #f5f5f5; }

/* A link that the user has already visited */
a:visited { color: purple; }

Live Result — Hover the buttons

Pseudo-elements

Pseudo-elements let you style a specific part of an element — not the whole thing. You write them with two colons: element::part.

Most common: ::before (adds content before), ::after (adds content after), ::first-letter, ::selection (text the user highlights).

CSS

/* Make the first letter of a paragraph large */
p::first-letter {
  font-size: 48px;
  color: red;
  float: left;
}

/* Add a checkmark before each list item */
li::before {
  content: "✓ ";
  color: green;
}

/* Change the highlight color when user selects text */
::selection {
  background: yellow;
  color: black;
}

Specificity — Which Rule Wins?

When two CSS rules target the same element, CSS uses a point system called specificity to decide which one applies. The rule with more points wins.

Inline style = 1000 points
ID selector = 100 points
Class / pseudo-class = 10 points
Element selector = 1 point

1000

Inline style

100

ID

10

Class

1

Element

CSS — Which color applies to the element?

p          { color: gray; }   /* 1 point  — loses */
.intro     { color: blue; }   /* 10 points */
#special   { color: red; }    /* 100 points — wins! */

⚠️

Avoid !importantYou can force any rule to win with color: red !important; but avoid using it. It overrides everything and makes your CSS very hard to debug later.

Module 03

Colors, Backgrounds & Borders

Color brings a webpage to life. CSS gives you multiple ways to define and apply colors — to text, backgrounds, and borders.

Color Formats

CSS supports several formats for writing colors. All of these formats can produce any color — you just use whichever is most convenient:

Named — English color names like red, blue, tomato. Limited options.
HEX — a 6-digit code starting with #. Most commonly used by designers. Example: #ff0000
RGB — Red, Green, Blue values from 0 to 255. Example: rgb(255, 0, 0)
RGBA — Same as RGB but with a 4th value for opacity (0 = fully transparent, 1 = fully visible). Use this when you need transparency.

CSS — All of these are the same red color

p { color: red; }                    /* Named */
p { color: #ff0000; }               /* HEX — most common */
p { color: rgb(255, 0, 0); }        /* RGB */
p { color: rgba(255, 0, 0, 0.5); }  /* RGBA — 50% transparent */

Common Colors

#c84b31

#1d4ed8

#059669

#f59e0b

#7c3aed

#1a1a1a

💡

Rule of thumbUse HEX for solid colors. Use rgba() when you need transparency. You can pick HEX codes from any color picker tool.

Background Properties

Every element can have a background — a solid color, an image, or a gradient. The most important background properties are:

background-color — sets a solid color
background-image — sets an image or gradient
background-size: cover — makes the image fill the element completely
background-position: center — centers the image
background-repeat: no-repeat — prevents the image from tiling

CSS

/* Solid background color */
.hero { background-color: #1a1a2e; }

/* Background image that fills the element */
.banner {
  background-image: url('photo.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 400px;
}

/* Gradient background — no image file needed */
.gradient-box {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

Gradient Examples

Borders

A border wraps around an element. Every border needs three things:

Width — how thick (e.g. 2px)
Style — what it looks like (solid, dashed, dotted, double)
Color — what color it is

You can also round corners with border-radius. A value of 50% on a square element creates a perfect circle.

CSS

/* Shorthand: width style color */
.box    { border: 2px solid #333; }
.dashed { border: 2px dashed red; }
.dotted { border: 2px dotted blue; }

/* Border on one side only */
.underline { border-bottom: 3px solid #c84b31; }

/* Rounded corners */
.card   { border-radius: 12px; }
.pill   { border-radius: 50px; }  /* pill shape */
.circle { border-radius: 50%; }   /* perfect circle */

Border Styles

solid

dashed

dotted

double

pill

circle

Module 04

Typography & Text Styling

Typography is about how text looks — which font, what size, how much spacing between lines and letters. Good typography makes content easy to read and professional looking.

Font Family

font-family sets which font to use. You can use:

Built-in fonts — like Arial, Georgia, monospace. Available on every device without importing.
Google Fonts — thousands of free fonts you can import into any project. First link the font in your HTML <head>, then use it in CSS.

Always provide a fallback font in case the first one fails to load.

CSS — Built-in fonts

body { font-family: Arial, sans-serif; }
h1   { font-family: Georgia, serif; }

HTML — Link a Google Font first

<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">

CSS — Then use it

body { font-family: 'Inter', sans-serif; }
h1   { font-family: 'Playfair Display', serif; }

Font Size, Weight & Style

font-size — how big the text is. Use rem units (explained below) for best practice.
font-weight — how bold the text is. Values go from 100 (thin) to 900 (heavy). 400 is normal, 700 is bold.
font-style — can be normal or italic.

CSS

h1        { font-size: 2.5rem; }   /* large heading */
p         { font-size: 1rem; }     /* normal body text */
.small    { font-size: 0.8rem; }  /* smaller text */

.bold     { font-weight: 700; }
.thin     { font-weight: 300; }
.italic   { font-style: italic; }

Font Sizes

2rem — Heading

1.25rem — Subheading

1rem — Body text

0.8rem — Small / caption

Units — px vs rem vs em vs %

CSS has several units for size. Choosing the right one matters:

px — fixed pixels. Always the same size regardless of screen or user settings. Good for borders and shadows.
rem — relative to the root font-size (usually 16px). So 1rem = 16px, 2rem = 32px. Best choice for font sizes because it respects user accessibility settings.
em — relative to the parent element's font-size. Useful for spacing inside components.
% — percentage of the parent element. Best for widths and layouts.

Unit	What it means	Best used for
px	Fixed pixels — always same size	Borders, shadows
rem	Relative to root font-size (16px default)	Font sizes ✅
em	Relative to parent's font-size	Padding inside components
%	Percentage of parent element	Widths, layout

Text Properties

Beyond font, CSS has many properties to control how text is displayed:

CSS

p {
  text-align: center;        /* left | right | center | justify */
  line-height: 1.8;           /* space between lines — 1.6 to 1.8 is readable */
  letter-spacing: 0.05em;    /* space between characters */
  text-transform: uppercase; /* uppercase | lowercase | capitalize */
  text-decoration: none;     /* underline | line-through | none */
}

/* Cut off long text with "..." */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

text-overflow: ellipsis

This is a very long line of text that gets cut off with dots at the end.

Module 05 ⭐ Very Important

The Box Model

The Box Model is the most fundamental concept in CSS. Every single element on a webpage — a heading, a button, an image — is treated as a rectangular box. Understanding this box is the key to understanding all spacing and layout in CSS.

The 4 Layers of Every Element

Every element has 4 layers, from the inside out:

Content — the actual text or image inside the element
Padding — transparent space between the content and the border. Padding is inside the element.
Border — the line that wraps around the padding and content
Margin — transparent space outside the border, between this element and others

Think of it like a framed photo: the photo is the content, the white mat inside the frame is padding, the frame itself is the border, and the wall space around the frame is the margin.

Box Model Visual

MARGIN — space outside the element

BORDER — the border line

PADDING — space inside, around content

CONTENT
your text or image

Margin & Padding

Both margin and padding use the same shorthand syntax. When you give one value, it applies to all 4 sides. When you give two values, the first is top/bottom, the second is left/right.

CSS — Shorthand values

/* 1 value — all 4 sides */
.box { margin: 20px; }

/* 2 values — top/bottom | left/right */
.box { margin: 20px 40px; }

/* 4 values — top | right | bottom | left (clockwise) */
.box { margin: 10px 20px 30px 40px; }

/* Individual sides */
.box { margin-top: 10px; }

/* Center an element horizontally (must have a width) */
.center {
  width: 600px;
  margin: 0 auto;  /* auto left and right = centered */
}

box-sizing: border-box — The Most Important Rule in CSS

By default, CSS has a confusing behavior: if you set width: 300px on an element and then add padding: 20px, the element becomes 340px wide (300 + 20 + 20). This breaks layouts.

The fix is to set box-sizing: border-box — this makes padding and border count inside the width, so the element stays exactly 300px. Always add this to every project at the top of your CSS file.

CSS — Put this at the top of every CSS file

* {
  box-sizing: border-box;
}

Without vs With border-box

content-box (default) — unexpectedly wider ❌

width: 200px + padding: 20px
= actually 244px wide!

border-box — exactly 200px ✅

width: 200px + padding: 20px
= stays exactly 200px ✓

Width & Height

CSS

.box {
  width: 400px;       /* fixed width */
  height: 200px;      /* fixed height */
  max-width: 100%;    /* never wider than its parent */
  min-height: 50px;   /* never shorter than this */
}

.full-width { width: 100%; }    /* fills its parent completely */
.hero       { height: 100vh; }  /* full viewport height */

Module 06

Layout with Flexbox

Flexbox is a layout system that makes it easy to arrange elements in a row or column, control the space between them, and align them. Before Flexbox, creating layouts in CSS was complicated. Now it's the standard way.

How Flexbox Works

You apply display: flex to a container element. This makes the container a flex container, and all its direct children automatically become flex items that follow flexbox rules.

By default, flex items line up in a row side by side, instead of stacking vertically like normal block elements.

CSS

.container {
  display: flex;  /* turns flexbox on */
}

Before flex — elements stack vertically

Box 1

Box 2

Box 3

After display: flex — elements line up in a row

Box 1

Box 2

Box 3

Container Properties

These properties go on the flex container (the parent):

flex-direction — row (left to right) or column (top to bottom)
justify-content — alignment along the main axis (horizontal in row, vertical in column)
align-items — alignment along the cross axis (vertical in row, horizontal in column)
gap — space between items
flex-wrap: wrap — allows items to wrap to the next line if they don't fit

CSS

.container {
  display: flex;
  flex-direction: row;          /* row | column | row-reverse */
  justify-content: space-between; /* flex-start | flex-end | center | space-between | space-around */
  align-items: center;          /* flex-start | flex-end | center | stretch */
  gap: 16px;
  flex-wrap: wrap;
}

justify-content values

space-between

1

2

3

center

1

2

3

flex-end

1

2

3

Flex Item Properties

These go on the children (the flex items):

flex: 1 — tells the item to grow and fill the available space equally with other flex items
flex: 2 — takes up twice as much space as an item with flex: 1
align-self — overrides align-items for just this one item
order — changes the visual order of items without changing the HTML

CSS

.item     { flex: 1; }         /* grow equally */
.item     { flex: 2; }         /* grow double compared to flex:1 items */
.item     { flex: 0 0 200px; } /* fixed 200px, don't grow */

.special  { align-self: flex-end; }
.last     { order: 99; }

flex: 1 vs flex: 2

flex: 1

flex: 2 — twice the space

flex: 1

Module 07

Layout with CSS Grid

CSS Grid is a two-dimensional layout system — it controls both rows and columns at the same time. Use it for full page layouts, dashboards, and image galleries.

Flexbox vs Grid — When to Use Which

Use Flexbox for one-dimensional layouts — a row of buttons, a navigation bar, a list of cards that flow in one direction.
Use Grid for two-dimensional layouts — when you need to control rows AND columns at the same time, like a full page layout with a header, sidebar, and main content.

They are not competing — they are often used together on the same page.

Basic Grid Setup

Apply display: grid to a container, then define your columns using grid-template-columns. The fr unit means "fraction of available space" — it's like flex: 1 but for grid.

CSS

.grid {
  display: grid;

  /* 3 equal columns */
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-columns: repeat(3, 1fr);   /* same thing, shorter */

  /* Sidebar (fixed) + main content (fills rest) */
  grid-template-columns: 250px 1fr;

  gap: 20px;
}

repeat(3, 1fr) — 3 equal columns

1

2

3

4

5

6

Spanning Columns and Rows

A grid item can span across multiple columns or rows — just like merging cells in a spreadsheet.

CSS

/* Span 2 columns wide */
.wide { grid-column: span 2; }

/* Span 2 rows tall */
.tall { grid-row: span 2; }

/* Place at exact grid position */
.header {
  grid-column: 1 / 3;  /* from column line 1 to line 3 */
}

Spanning example

spans 2 columns

3

4

spans
2 rows

6

7

auto-fill + minmax — Self-Adjusting Grid

This is one of the most powerful patterns in CSS Grid. It automatically adjusts the number of columns based on how much screen space is available — without any media queries.

auto-fill — fit as many columns as possible
minmax(250px, 1fr) — each column is at least 250px wide, but can grow to fill space equally

CSS — Responsive gallery, no media queries needed

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

grid-template-areas — Named Layout

You can name regions of the grid and then assign elements to those named regions. This makes complex page layouts very readable and easy to understand.

CSS

.page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

Named grid layout

header

sidebar

main

footer

Module 08

Responsive Design & Media Queries

Responsive design means your website looks good on every screen size — mobile, tablet, and desktop. The main tool for this is the media query, which lets you apply different styles based on screen width.

What is a Media Query?

A media query is a conditional CSS rule. It says: "Only apply these styles if the screen is a certain width."

You write it using @media followed by a condition in parentheses. Everything inside the curly braces only applies when that condition is true.

CSS — Media Query Syntax

/* Base styles — apply to all screens */
.container {
  width: 100%;
  padding: 16px;
}

/* Only applies when screen is 768px or wider */
@media (min-width: 768px) {
  .container {
    max-width: 720px;
    margin: 0 auto;
  }
}

/* Only applies when screen is 1024px or wider */
@media (min-width: 1024px) {
  .container {
    max-width: 1100px;
  }
}

Common Breakpoints

A breakpoint is the screen width where your layout changes. These are the standard breakpoints used in most projects:

Name	Device	min-width
Default	Small phones	No query (your base styles)
sm	Phones	576px
md	Tablets	768px
lg	Laptops	1024px
xl	Desktops	1280px

Mobile-First Approach

The recommended approach is to write your base CSS for mobile first — the simplest layout. Then use min-width media queries to progressively add more complex styles for larger screens.

This is better than the alternative (designing desktop first and then trying to shrink it for mobile), because most web traffic is on mobile devices.

CSS — Mobile-First Example

/* MOBILE — base styles, single column */
.cards {
  display: flex;
  flex-direction: column;  /* stacks vertically */
  gap: 16px;
}
.nav-links  { display: none; }   /* hide navigation links */
.hamburger  { display: block; }  /* show hamburger icon */

/* TABLET — 768px and above */
@media (min-width: 768px) {
  .cards { flex-direction: row; flex-wrap: wrap; }
}

/* DESKTOP — 1024px and above */
@media (min-width: 1024px) {
  .nav-links { display: flex; }  /* show full nav */
  .hamburger { display: none; }  /* hide hamburger */
}

Responsive Tricks

CSS

/* clamp() — font that scales with the screen */
h1 {
  /* minimum 1.8rem, grows with screen, maximum 3.5rem */
  font-size: clamp(1.8rem, 5vw, 3.5rem);
}

/* Images — never overflow their container */
img {
  max-width: 100%;   /* never wider than parent */
  height: auto;      /* keeps the original ratio */
  display: block;
}

✅

Always add this to every projectimg { max-width: 100%; height: auto; } — without this, images will overflow on mobile screens.

Module 09

CSS Animations & Transitions

CSS can animate elements without any JavaScript. There are two tools: Transitions for simple state changes (like hover), and Animations for complex multi-step motion you define with keyframes.

Transitions

A transition makes a CSS property change smoothly over time instead of instantly.

You define it on the element in its normal state (not in the hover state). The transition property takes three values:

property — which CSS property to animate, or all for everything
duration — how long the animation takes (e.g. 0.3s)
timing function — the speed curve (ease, linear, ease-in-out)

CSS

.btn {
  background: #c84b31;
  padding: 12px 28px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;  /* put this on the base state */
}

.btn:hover {
  background: #a83a24;
  transform: translateY(-3px);  /* move up 3px */
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

Hover the buttons

Transform — Move, Scale, Rotate

transform changes the position, size, or rotation of an element without affecting the layout around it. It is commonly used with transitions to create smooth hover effects. You can combine multiple transforms in one line.

CSS

.box:hover {
  transform: translateX(20px);    /* move right */
  transform: translateY(-10px);   /* move up */
  transform: scale(1.1);          /* 10% bigger */
  transform: rotate(45deg);       /* rotate 45 degrees */

  /* Combine multiple transforms */
  transform: translateY(-5px) scale(1.05);
}

CSS Animations — @keyframes

Animations are more powerful than transitions. You define exact steps (called keyframes) using percentages from 0% to 100%, then apply the animation to an element.

The animation properties are:

animation-name — the name you gave to the @keyframes
animation-duration — how long one cycle takes
animation-timing-function — speed curve
animation-iteration-count — how many times to repeat (infinite = loop forever)
animation-delay — wait before starting

You can write all of this in one shorthand: animation: name duration timing count

CSS

/* Step 1: Define the animation steps */
@keyframes bounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-30px); }
  100% { transform: translateY(0); }
}

/* Step 2: Apply it to an element */
.ball {
  animation: bounce 1s ease-in-out infinite;
}

/* Fade + slide in (common for page load) */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Stagger elements in one by one with delay */
.hero h1 { animation: fadeUp 0.8s ease both; }
.hero p  { animation: fadeUp 0.8s ease 0.2s both; }  /* 0.2s later */
.hero .btn{ animation: fadeUp 0.8s ease 0.4s both; }  /* 0.4s later */

Animations running live

Pulsing

Module 10

Advanced CSS

These are the tools that take your CSS from functional to professional-looking — CSS Variables, Box Shadows, Gradients, and Text Shadows. Real websites use all of these.

CSS Variables

CSS Variables (also called Custom Properties) let you store a value once and use it everywhere. If you ever want to change your brand color, you change it in one place and it updates the entire website automatically.

You define variables on :root (which means the whole page can access them) with two dashes before the name: --variable-name. You use them with var().

CSS

/* Define variables on :root — accessible everywhere */
:root {
  --primary: #c84b31;
  --secondary: #1d4ed8;
  --text: #1a1a1a;
  --bg: #f8f9fa;
  --radius: 12px;
  --shadow: 0 4px 20px rgba(0,0,0,0.1);
}

/* Use them with var() */
body {
  background: var(--bg);
  color: var(--text);
}

.btn {
  background: var(--primary);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Dark mode — just override the variables */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d0d0d;
    --text: #f0f0f0;
  }
}

✅

This is how real websites are builtEvery professional design system uses CSS Variables. Learn to use them from the start — it keeps your code clean and easy to maintain.

Box Shadow

Box shadow adds depth and dimension to elements. The syntax has 5 parts (in order): x-offset y-offset blur-radius spread-radius color

You can apply multiple shadows by separating them with a comma. Adding inset at the start makes the shadow appear inside the element instead of outside.

CSS

/* Basic soft shadow */
.card { box-shadow: 0 4px 20px rgba(0,0,0,0.1); }

/* Layered shadow — looks more realistic */
.card { box-shadow: 0 2px 4px rgba(0,0,0,0.08), 0 20px 40px rgba(0,0,0,0.12); }

/* Colored glow effect */
.btn-red { box-shadow: 0 8px 30px rgba(200,75,49,0.4); }

/* Shadow on the inside */
.input { box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); }

/* Shadow grows on hover */
.card       { box-shadow: none; transition: box-shadow 0.3s ease, transform 0.3s ease; }
.card:hover { box-shadow: 0 20px 60px rgba(0,0,0,0.15); transform: translateY(-6px); }

Shadow Depths

Soft

Medium

Heavy

Colored Glow

Gradients

A gradient is a smooth transition between two or more colors. In CSS, gradients are used as the value of the background property — no image file needed.

Types of gradients:

linear-gradient() — colors flow in a straight line (top, bottom, left, right, or a diagonal angle)
radial-gradient() — colors radiate outward from a center point in a circle

You can also apply a gradient to text using a clip technique.

CSS

/* Linear gradient — left to right */
.box { background: linear-gradient(to right, #c84b31, #f59e0b); }

/* Linear gradient — at an angle */
.box { background: linear-gradient(135deg, #667eea, #764ba2); }

/* Radial gradient — radiates from center */
.box { background: radial-gradient(circle at center, #1d4ed8, #0d0d0d); }

/* Gradient text — a popular design technique */
.gradient-text {
  background: linear-gradient(135deg, #c84b31, #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Gradient Examples

Gradient Text Effect

Text Shadow

text-shadow works just like box-shadow but applies to text. The syntax is: x-offset y-offset blur-radius color. You can add multiple shadows separated by commas.

CSS

/* Basic text shadow */
h1      { text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }

/* Glow effect */
.glow   { text-shadow: 0 0 20px rgba(29,78,216,0.8); }

/* Multiple shadows — retro/stacked look */
.retro  { text-shadow: 3px 3px 0 #c84b31, 6px 6px 0 #f59e0b; }

Text Shadow Examples

Basic Shadow

Glow Effect

Retro Stacked