5 CSS Tricks That Instantly Improve Your Web Design

Before vs After Comparison Demo

1. Text Shadow for Readability

Add text shadows to improve readability of text overlaying images

Without Text Shadow

Explore the Wilderness

.hero-title {
  font-size: 2.2rem;
  color: white;
}

With Text Shadow

Explore the Wilderness

.hero-title {
  font-size: 2.2rem;
  color: white;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}

2. Smooth Transition Effects

Enhance user interactions with smooth hover transitions

Without Transitions

.button {
  background-color: #4361ee;
  color: white;
}

.button:hover {
  background-color: #4895ef;
}

With Transitions

.button {
  background-color: #4361ee;
  color: white;
  transition: all 0.3s ease;
}

.button:hover {
  background-color: #4895ef;
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(67,97,238,0.3);
}

3. Box Shadow for Depth

Create visual hierarchy and depth with subtle shadows

Without Box Shadow

Basic Card

This card uses only a border for separation. It lacks depth and visual hierarchy.

.card {
  border: 1px solid #dee2e6;
  border-radius: 8px;
}

With Box Shadow

Enhanced Card

This card uses subtle box-shadow to create depth and visual interest.

.card {
  border: 1px solid transparent;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}

4. Gap in Flex/Grid Layouts

Simplify spacing with the gap property for consistent layouts

Without Gap Property

Using margins for spacing (inconsistent)

.gallery {
  display: flex;
  flex-wrap: wrap;
}

.gallery-item {
  margin: 0.5rem;
}

With Gap Property

Using gap for consistent spacing

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.gallery-item {
  /* No margin needed */
}

5. Improved Typography

Enhance readability with line-height & letter-spacing

Default Typography

Typography Matters

This is an example paragraph demonstrating default typography settings. Without proper line height and letter spacing, text can feel cramped and difficult to read, especially in longer passages.

Good typography enhances readability, creates hierarchy, and improves overall user experience. Paying attention to these details makes your content more accessible and enjoyable.

/* Browser defaults */
line-height: normal;
letter-spacing: normal;

Optimized Typography

Typography Matters

This is an example paragraph demonstrating optimized typography settings. With appropriate line height and letter spacing, text becomes more readable and aesthetically pleasing, especially in longer passages.

Good typography enhances readability, creates hierarchy, and improves overall user experience. Paying attention to these details makes your content more accessible and enjoyable.

h3 {
  letter-spacing: -0.5px;
}

p {
  line-height: 1.7;
  letter-spacing: 0.2px;
}