Skip to main content
Tovlix
Design

CSS Box Shadow and Border Radius: Complete Visual Effects Guide

Master CSS box shadows and border radius to create modern, professional UI designs. Learn the syntax, see examples, and use free visual generators.

February 3, 20269 min readBy Tovlix Team

Why CSS Visual Effects Matter


Box shadows and border radius are two of the most impactful CSS properties for modern web design. Shadows add depth and hierarchy, making elements feel like they float above the page. Rounded corners soften the look and create a friendlier, more modern aesthetic.


Together, these properties transform flat HTML elements into polished, professional UI components — cards, buttons, modals, input fields, and more.


CSS Box Shadow


Syntax

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


Parameters Explained

  • offset-x - — Horizontal distance of the shadow (positive = right, negative = left)
  • offset-y - — Vertical distance of the shadow (positive = down, negative = up)
  • blur-radius - — How blurry the shadow is (0 = sharp, higher = softer)
  • spread-radius - — How much the shadow expands or contracts (optional)
  • color - — The shadow color (use rgba for transparency)
  • inset - — Optional keyword to create an inner shadow

    • Box Shadow Examples


    Subtle Card Shadow

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    A gentle shadow for cards and content containers. Adds depth without being distracting.


    Medium Elevation Shadow

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

    A more pronounced shadow for elements that should stand out, like modals or dropdowns.


    Large Dramatic Shadow

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);

    A bold shadow for hero elements or important CTAs that need to command attention.


    Inset Shadow

    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);

    Creates the appearance of an element pressed into the page. Useful for input fields and pressed button states.


    Colored Shadow

    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.5);

    A shadow that matches the element's color, creating a glowing effect. Popular for buttons and branded elements.


    Multiple Shadows

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1);

    Layering multiple shadows creates more realistic depth. The first shadow handles close proximity, the second handles distance.


    Create custom box shadows visually with our free Box Shadow Generator. Adjust values with sliders and copy the CSS instantly.


    CSS Border Radius


    Syntax

    border-radius: value;


    Parameters

  • Single value - — Applies the same radius to all four corners
  • Two values - — First applies to top-left/bottom-right, second to top-right/bottom-left
  • Four values - — Each corner individually (top-left, top-right, bottom-right, bottom-left)
  • Percentage - — Relative to the element's dimensions (50% on a square creates a circle)

    • Border Radius Examples


    Subtle Rounding

    border-radius: 4px;

    Softens sharp corners slightly. Standard for buttons and input fields.


    Medium Rounding

    border-radius: 8px;

    A noticeable but not extreme rounding. Common for cards and containers.


    Large Rounding

    border-radius: 16px;

    A friendly, modern look. Popular for modal windows and feature cards.


    Pill Shape

    border-radius: 9999px;

    Creates a fully rounded pill shape. Used for tags, badges, and pill-style buttons.


    Circle

    border-radius: 50%;

    Creates a perfect circle when applied to a square element. Used for profile pictures and icons.


    Custom Corners

    border-radius: 16px 16px 0 0;

    Rounds only the top corners. Useful for tab headers and cards with images at the bottom.


    Design custom border radius visually with our free Border Radius Generator.


    Combining Box Shadow and Border Radius


    The best UI designs combine both properties for a polished look:


    The Modern Card

    border-radius: 12px;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

    Clean, minimal, and professional.


    The Elevated Button

    border-radius: 8px;

    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);

    A button that demands attention with a colored glow.


    The Profile Avatar

    border-radius: 50%;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

    A circular image with a subtle shadow for depth.


    The Floating Modal

    border-radius: 16px;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);

    A prominent overlay that clearly sits above the page content.


    Modern CSS Visual Effects


    Glassmorphism

    Frosted glass effect combining background blur, transparency, and subtle borders.

    Generate glassmorphism effects with our Glassmorphism Generator.


    Neumorphism

    Soft, extruded UI elements created with multiple box shadows — one light, one dark.

    Create neumorphic designs with our Neumorphism Generator.


    Gradient Backgrounds

    Smooth color transitions that add visual interest without images.

    Build gradients with our Gradient Generator.


    CSS Animations

    Hover effects, transitions, and keyframe animations bring your shadows and rounded elements to life.

    Create animations with our CSS Animation Generator.


    Free CSS Design Tools


  • Box Shadow Generator - Visual box shadow builder
  • Border Radius Generator - Custom corner rounding
  • Glassmorphism Generator - Frosted glass effects
  • Neumorphism Generator - Soft UI elements
  • Gradient Generator - CSS gradient builder
  • CSS Button Generator - Complete button designer
  • CSS Animation Generator - Keyframe animations
  • CSS Flexbox Generator - Flexbox layout builder
  • CSS Grid Generator - Grid layout builder
  • SVG Wave Generator - Decorative wave sections
  • Color Palette Generator - Color scheme creation

    • Conclusion


    Box shadows and border radius are the foundation of modern CSS visual design. Master these two properties, and you can create professional, polished interfaces without complex tools or frameworks. Use our free Box Shadow Generator and Border Radius Generator to experiment visually and export production-ready CSS.


    cssbox shadowborder radiusweb designui designvisual effectsfrontendcss properties

    Try Our Free Tools

    Generate passwords, QR codes, invoices, and 200+ more tools - completely free!

    Explore All Tools