×

Hubspot CSS Box-Shadow Guide

/ CRM, Hubspot / By

Hubspot CSS Box-Shadow Guide

The Hubspot blog offers one of the clearest introductions to CSS box-shadow, and this guide distills those lessons into a practical, step-by-step reference you can apply to your own projects right away.

Shadows are a core visual cue in modern interfaces. With a few lines of CSS, you can add depth, hierarchy, and focus that feel consistent with the clean, product-led style showcased on the Hubspot website.

What the Hubspot Box-Shadow Tutorial Covers

The original article on the Hubspot blog explains how CSS box-shadow works, when to use it, and how to refine the effect so it looks professional rather than distracting.

You will learn how to:

  • Understand the full box-shadow syntax and each parameter
  • Create simple flat shadows for cards and buttons
  • Design soft, natural shadows inspired by Hubspot UI elements
  • Use multiple layered shadows for realistic depth
  • Apply shadows to hover states for interactive components

This guide follows the same structure while focusing on hands-on usage you can copy into your codebase.

Understanding CSS Box-Shadow the Hubspot Way

At the heart of the Hubspot explanation is the CSS box-shadow property. Its power comes from a small set of parameters you can mix and match.

Core Box-Shadow Syntax

The basic syntax is:

box-shadow: offset-x offset-y blur-radius spread-radius color;

Each value has a concrete visual impact, as detailed in the Hubspot article:

  • offset-x: Horizontal movement of the shadow (positive = right, negative = left).
  • offset-y: Vertical movement (positive = down, negative = up).
  • blur-radius: How soft or sharp the edges are (larger values mean softer edges).
  • spread-radius: How much the shadow grows or shrinks from the element’s size.
  • color: The color of the shadow, including alpha transparency for subtle looks.

You can also add the keyword inset to move the shadow inside the element instead of outside it.

Inset Shadows Explained with a Hubspot-Style Example

Inset shadows are useful for input fields, pressed buttons, or recessed panels. The Hubspot tutorial demonstrates how insets can simulate depth inside a component.

.input-field {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
}

This pattern produces a soft inner ring that helps form fields stand out on light backgrounds.

Hubspot-Inspired Box-Shadow Examples for UI

Hubspot interfaces lean on clean, unobtrusive shadows. You can replicate that feel by starting with low blur values, subtle offsets, and semi-transparent colors.

Simple Card Shadow

Use this basic pattern for cards, tiles, or feature highlights:

.card {
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.12);
  border-radius: 8px;
}

The small vertical offset and light blur create a gentle lift effect, similar to card components highlighted in Hubspot tutorials.

Soft Hubspot-Style Panel Shadow

For key sections and panels, the Hubspot approach favors broader, softer shadows that feel natural instead of harsh.

.panel {
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
  border-radius: 12px;
}

This increases both blur and vertical offset to move the panel visually off the page, a technique you can see mirrored across the Hubspot design system.

Advanced Layered Shadows in the Hubspot Article

One of the most valuable tips in the source article is using multiple box-shadows for richer, more realistic depth.

CSS allows you to combine several shadows by separating them with commas:

.elevated-card {
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.08),
    0 6px 18px rgba(15, 23, 42, 0.16);
}

The first small shadow captures detail close to the element. The second, bigger shadow gives the impression of overall lift. This two-layer technique is a hallmark of refined UI, and the Hubspot article highlights how layering prevents shadows from looking fake or flat.

Layered Hover Effects with a Hubspot Feel

Hover states give you a chance to animate shadows subtly without overwhelming motion.

.cta-button {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.cta-button:hover {
  transform: translateY(-1px);
  box-shadow:
    0 4px 10px rgba(15, 23, 42, 0.18),
    0 10px 30px rgba(15, 23, 42, 0.16);
}

Combining a slight upward movement with stronger layered shadows creates a smooth microinteraction similar to buttons highlighted in Hubspot product pages.

Step-by-Step: Recreate a Hubspot Shadow

Use this simple process, adapted from the teaching style on the Hubspot blog, to design your own shadows.

1. Choose the Shadow’s Purpose

Decide what the element needs visually:

  • Cards and tiles – subtle depth, low distraction.
  • Primary CTAs – clearer lift and hover emphasis.
  • Modals or overlays – strong separation from the page.

2. Start with Offsets

Follow a structure consistent with the Hubspot article:

  • Begin with offset-x: 0 to keep the shadow centered.
  • Use offset-y: 2–8px depending on how high the element should appear.

3. Tune Blur and Spread

Next, adjust softness and size:

  • Blur: 4–8px for small elements, 16–32px for large panels.
  • Spread: usually 0; try slight positive values for stronger presence.

4. Pick a Color with Transparency

The Hubspot guide emphasizes using RGBA for control over opacity:

rgba(15, 23, 42, 0.16)

This style keeps shadows neutral and avoids muddy color casts.

5. Add Extra Layers if Needed

Once a single shadow looks good, layer one more for realism, as shown earlier. Each layer should have different blur and opacity for depth variation, echoing the multi-layer techniques in the Hubspot tutorial.

Practical Tips from the Hubspot Box-Shadow Guide

Here are condensed best practices inspired by the original Hubspot content:

  • Stay subtle: Overly dark or large shadows look old-fashioned.
  • Use consistent tokens: Reuse a small set of shadow presets across your system.
  • Test on multiple backgrounds: What looks good on white may be too strong on gray.
  • Check accessibility: Shadows alone should not indicate state; pair them with color and text.

Where to Learn More Beyond Hubspot

To expand on what you learned from the Hubspot article, consider building a small component library and testing a few box-shadow scales: subtle, medium, and strong. You can also pair shadows with borders and background gradients for layered depth.

The full, original tutorial that inspired this breakdown is available on the Hubspot blog here: Hubspot CSS box-shadow article. It includes additional examples and explanations that reinforce the patterns described in this guide.

If you are integrating box-shadow into a broader SEO and conversion-focused site build, you can also explore implementation strategies and audits at Consultevo, which covers technical optimization, design systems, and performance.

By combining these resources with the Hubspot approach to visual hierarchy, you will be able to create interfaces that feel polished, consistent, and easy to scan, all powered by a small but mighty CSS property: box-shadow.

Need Help With Hubspot?

If you want expert help building, automating, or scaling your Hubspot , work with ConsultEvo, a team who has a decade of Hubspot experience.

Scale Hubspot

“`

Verified by MonsterInsights