Browser Support

Menu

Tailwind CSS Background Blend Mode

Background Blend Mode determines how an element's background image and background color merge. Tailwind includes a variety of utility classes to handle these compositing methods, making it easier to style backgrounds in a standardized and declarative way.

In this guide, we will learn how to use various background blend modes in Tailwind CSS:

Class	Properties	Example
`bg-blend-normal`	`background-blend-mode: normal;`	`<div className="bg-blend-normal"></div>`
`bg-blend-multiply`	`background-blend-mode: multiply;`	`<div className="bg-blend-multiply"></div>`
`bg-blend-screen`	`background-blend-mode: screen;`	`<div className="bg-blend-screen"></div>`
`bg-blend-overlay`	`background-blend-mode: overlay;`	`<div className="bg-blend-overlay"></div>`
`bg-blend-darken`	`background-blend-mode: darken;`	`<div className="bg-blend-darken"></div>`
`bg-blend-lighten`	`background-blend-mode: lighten;`	`<div className="bg-blend-lighten"></div>`
`bg-blend-color-dodge`	`background-blend-mode: color-dodge;`	`<div className="bg-blend-color-dodge"></div>`
`bg-blend-color-burn`	`background-blend-mode: color-burn;`	`<div className="bg-blend-color-burn"></div>`
`bg-blend-hard-light`	`background-blend-mode: hard-light;`	`<div className="bg-blend-hard-light"></div>`
`bg-blend-soft-light`	`background-blend-mode: soft-light;`	`<div className="bg-blend-soft-light"></div>`
`bg-blend-difference`	`background-blend-mode: difference;`	`<div className="bg-blend-difference"></div>`
`bg-blend-exclusion`	`background-blend-mode: exclusion;`	`<div className="bg-blend-exclusion"></div>`
`bg-blend-hue`	`background-blend-mode: hue;`	`<div className="bg-blend-hue"></div>`
`bg-blend-saturation`	`background-blend-mode: saturation;`	`<div className="bg-blend-saturation"></div>`
`bg-blend-color`	`background-blend-mode: color;`	`<div className="bg-blend-color"></div>`
`bg-blend-luminosity`	`background-blend-mode: luminosity;`	`<div className="bg-blend-luminosity"></div>`

Overview of Background Blend Mode

Adding the Background Blend Mode

To blend the background image of an element with its background color, use the bg-blend-* utilities, e.g., bg-blend-darken, bg-blend-hard-light, etc.

This is a live editor. Play around with it!

export default function BlendModeDemo() {
    
{/* This code snippet is presented within a container that has a dark-blue background color and a background image */}

  return (
    <div
      className="bg-blend-multiply bg-blue-700 h-screen w-screen bg-cover bg-center" 
      style={{ backgroundImage: 'url(https://images.unsplash.com/photo-1517059224940-d4af9eec41b7)' }}
    >
      {/* 
        The background-blend-mode is set to 'multiply', enhancing the image with a darker overlay.
        background-blend-mode: multiply
      */}
    </div>
  );
}

States and Responsiveness

Tailwind utilities for background blend modes can also be used with interactive states and responsive breakpoints. This means you can change how backgrounds are merged when a user hovers or focuses, and handle different viewports conveniently. By using state-based or device-based variants, you can add background blends that only appear under specific conditions.

Hover and Focus States

To use the bg-blend-* utilities only when certain states are active, prepend the state modifiers to the background blend utility classes, e.g., hover:bg-blend-darken, etc.

This is a live editor. Play around with it!

export default function HoverFocusDemo() {
  return (
    <div
      tabindex="0"
      className="
        h-screen w-screen 
        bg-cover bg-center 
        bg-blend-multiply 
        bg-gray-700 
        hover:bg-blend-overlay 
        focus:bg-blend-screen
      "
      style={{ backgroundImage: 'url(https://images.unsplash.com/photo-1517059224940-d4af9eec41b7)' }}
    >
      {/* 
        Normal State: background-blend-mode: multiply
        Hover State: background-blend-mode: overlay
        Focus State: background-blend-mode: screen
      */}
    </div>
  );
}

Breakpoint Modifiers

To apply certain blend modes based on breakpoints, such as small (sm) or medium (md), prepend these modifiers to the background blend utilities, e.g., sm:bg-blend-darken, md:bg-blend-overlay.

This is a live editor. Play around with it!

export default function ResponsiveBlendDemo() {
  return (
    <div
      className="bg-blend-screen bg-gray-800 sm:bg-blend-overlay md:bg-blend-color-burn h-screen w-screen bg-cover bg-center"
      style={{ backgroundImage: 'url(https://images.unsplash.com/photo-1517059224940-d4af9eec41b7)' }}
    >
      {/*
        Default State for all Viewports: background-blend-mode: screen
        Small Screens (>=640px): background-blend-mode: overlay
        Medium Screens (>=768px): background-blend-mode: color-burn
      */}
    </div>
  );
}

Real World Examples

Product Showcase

A product showcase grid with a multiply blend effect across product images.

This is a live editor. Play around with it!

export default function ProductGrid() {
  const products = [
    {
      id: 1,
      name: "Leather Backpack",
      src: "https://images.unsplash.com/photo-1622560480605-d83c853bc5c3",
      alt: "Brown leather backpack",
      price: "$129.99"
    },
    {
      id: 2,
      name: "Canvas Tote",
      src: "https://images.unsplash.com/photo-1544816155-12df9643f363",
      alt: "Beige canvas tote bag",
      price: "$49.99"
    },
    {
      id: 3,
      name: "Messenger Bag",
      src: "https://images.unsplash.com/photo-1590874103328-eac38a683ce7",
      alt: "Black messenger bag",
      price: "$89.99"
    },
    {
      id: 4,
      name: "Travel Duffel",
      src: "https://images.unsplash.com/photo-1553062407-98eeb64c6a62",
      alt: "Gray travel duffel bag",
      price: "$159.99"
    },
    {
      id: 5,
      name: "Laptop Sleeve",
      src: "https://images.unsplash.com/photo-1576995853123-5a10305d93c0",
      alt: "Black laptop sleeve",
      price: "$39.99"
    },
    {
      id: 6,
      name: "Mini Crossbody",
      src: "https://images.unsplash.com/photo-1594223274512-ad4803739b7c",
      alt: "Red mini crossbody bag",
      price: "$69.99"
    }
  ];

  return (
    <div className="grid gap-4 p-8 bg-gray-100">
      {products.map((product) => (
        <div key={product.id} className="relative group">
          <div 
            className="h-64 bg-purple-500 bg-cover bg-center bg-blend-multiply transition-all duration-300 group-hover:bg-purple-600"
            style={{ backgroundImage: `url(${product.src})` }}
          />
          <div className="p-4 bg-white">
            <h3 className="text-lg font-semibold">{product.name}</h3>
            <p className="text-gray-600">{product.price}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

Team Member Cards

A team member cards section with a screen blend effect.

This is a live editor. Play around with it!

export default function TeamGrid() {
  const team = [
    {
      id: 1,
      name: "Sarah Johnson",
      role: "CEO",
      src: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
      alt: "Sarah Johnson portrait",
      bio: "10+ years of leadership experience"
    },
    {
      id: 2,
      name: "Michael Chen",
      role: "CTO",
      src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e",
      alt: "Michael Chen portrait",
      bio: "Expert in cloud architecture"
    },
    {
      id: 3,
      name: "Emma Williams",
      role: "Design Director",
      src: "https://images.unsplash.com/photo-1534528741775-53994a69daeb",
      alt: "Emma Williams portrait",
      bio: "Award-winning designer"
    },
    {
      id: 4,
      name: "James Martinez",
      role: "Lead Developer",
      src: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e",
      alt: "James Martinez portrait",
      bio: "Full-stack development guru"
    },
    {
      id: 5,
      name: "Lisa Thompson",
      role: "Marketing Head",
      src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
      alt: "Lisa Thompson portrait",
      bio: "Digital marketing specialist"
    },
    {
      id: 6,
      name: "David Kim",
      role: "Product Manager",
      src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d",
      alt: "David Kim portrait",
      bio: "Product strategy expert"
    }
  ];

  return (
    <div className="grid gap-6 p-10 bg-gray-50">
      {team.map((member) => (
        <div key={member.id} className="relative group cursor-pointer">
          <div 
            className="h-80 bg-blue-400 bg-cover bg-center transition-all duration-300 bg-blend-screen group-hover:bg-blue-500"
            style={{ backgroundImage: `url(${member.src})` }}
          >
            <div className="absolute bottom-0 left-0 right-0 p-6 text-white bg-gradient-to-t from-black/80">
              <h3 className="text-xl font-bold">{member.name}</h3>
              <p className="text-sm">{member.role}</p>
              <p className="text-sm mt-2 opacity-0 group-hover:opacity-100 transition-opacity">
                {member.bio}
              </p>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

Portfolio Gallery

A creative portfolio gallery using overlay blend mode for artistic image effects.

This is a live editor. Play around with it!

export default function PortfolioGallery() {
  const projects = [
    {
      id: 1,
      title: "Modern Architecture",
      category: "Photography",
      src: "https://images.unsplash.com/photo-1511818966892-d7d671e672a2",
      alt: "Modern building architecture"
    },
    {
      id: 2,
      title: "Urban Landscapes",
      category: "Photography",
      src: "https://images.unsplash.com/photo-1449824913935-59a10b8d2000",
      alt: "City skyline"
    },
    {
      id: 3,
      title: "Nature Abstract",
      category: "Art",
      src: "https://images.unsplash.com/photo-1507525428034-b723cf961d3e",
      alt: "Abstract nature scene"
    },
    {
      id: 4,
      title: "Street Culture",
      category: "Photography",
      src: "https://images.unsplash.com/photo-1516912481808-3406841bd33c",
      alt: "Street art and culture"
    },
    {
      id: 5,
      title: "Minimalist Design",
      category: "Design",
      src: "https://images.unsplash.com/photo-1493723843671-1d655e66ac1c",
      alt: "Minimalist interior"
    },
    {
      id: 6,
      title: "Portrait Series",
      category: "Photography",
      src: "https://images.unsplash.com/photo-1544005313-94ddf0286df2",
      alt: "Artistic portrait"
    }
  ];

  return (
    <div className="grid grid-cols-2 md:grid-cols-3 gap-0">
      {projects.map((project) => (
        <div 
          key={project.id} 
          className="relative group aspect-square bg-blend-overlay bg-cover bg-center bg-yellow-800"
          style={{ backgroundImage: `url(${project.src})` }}
        >
          {/* Hover Overlay */}
          <div className="absolute inset-0 bg-black bg-opacity-40 group-hover:bg-opacity-60 transition-all" />

          {/* Text Content */}
          <div className="relative flex flex-col justify-center items-center h-full text-white p-6">
            <h3 className="text-2xl font-bold text-center">{project.title}</h3>
            <p className="mt-2 text-sm uppercase tracking-wider">{project.category}</p>
          </div>
        </div>
      ))}
    </div>
  );
  
}

Recipe Card

A recipe card component that uses bg-blend-overlay to create an appetizing visual effect on food images.

This is a live editor. Play around with it!

const RecipeGallery = () => {
  const recipes = [
    {
      title: "Spicy Thai Basil Noodles",
      time: "30 mins",
      difficulty: "Medium",
      src: "https://images.unsplash.com/photo-1617093727343-374698b1b08d",
      alt: "Thai basil noodles in a bowl"
    },
    {
      title: "Mediterranean Quinoa Bowl",
      time: "25 mins",
      difficulty: "Easy",
      src: "https://images.unsplash.com/photo-1512621776951-a57141f2eefd",
      alt: "Quinoa bowl with vegetables"
    },
    {
      title: "Classic Margherita Pizza",
      time: "45 mins",
      difficulty: "Medium",
      src: "https://images.unsplash.com/photo-1604068549290-dea0e4a305ca",
      alt: "Margherita pizza"
    },
    {
      title: "Japanese Ramen Bowl",
      time: "50 mins",
      difficulty: "Hard",
      src: "https://images.unsplash.com/photo-1569718212165-3a8278d5f624",
      alt: "Ramen bowl"
    },
    {
      title: "Grilled Salmon Salad",
      time: "20 mins",
      difficulty: "Easy",
      src: "https://images.unsplash.com/photo-1467003909585-2f8a72700288",
      alt: "Salmon salad"
    },
    {
      title: "Chocolate Lava Cake",
      time: "35 mins",
      difficulty: "Medium",
      src: "https://images.unsplash.com/photo-1606313564200-e75d5e30476c",
      alt: "Chocolate lava cake"
    }
  ];

  return (
    <div className="grid grid-cols-2 gap-4 p-4">
      {recipes.map((recipe, index) => (
        <div key={index} className="relative overflow-hidden rounded-lg">
          <div
            className="absolute inset-0 bg-pink-600 bg-blend-darken bg-cover bg-center"
            style={{
              backgroundImage: `url(${recipe.src})`,
            }}
          />
          <div className="relative p-4 text-white">
            <h3 className="text-lg font-bold">{recipe.title}</h3>
            <div className="mt-2 text-sm">
              <p>Time: {recipe.time}</p>
              <p>Difficulty: {recipe.difficulty}</p>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
};

export default RecipeGallery;

Blog Cards with Luminosity Blend

Blog cards with luminosity blend mode for a sophisticated reading experience.

This is a live editor. Play around with it!

export default function BlogGrid() {
  const posts = [
    {
      id: 1,
      title: "The Future of AI",
      excerpt: "Exploring the latest developments in artificial intelligence",
      category: "Technology",
      src: "https://images.unsplash.com/photo-1555255707-c07966088b7b",
      alt: "AI visualization",
      author: "Dr. Emily Chen"
    },
    {
      id: 2,
      title: "Sustainable Design",
      excerpt: "How eco-friendly design is shaping our future",
      category: "Design",
      src: "https://images.unsplash.com/photo-1542601906990-b4d3fb778b09",
      alt: "Sustainable architecture",
      author: "Mark Thompson"
    },
    {
      id: 3,
      title: "Digital Privacy",
      excerpt: "Protecting your data in the digital age",
      category: "Security",
      src: "https://images.unsplash.com/photo-1563986768609-322da13575f3",
      alt: "Digital security",
      author: "Sarah Williams"
    },
    {
      id: 4,
      title: "Remote Work Culture",
      excerpt: "Building strong teams in a virtual world",
      category: "Business",
      src: "https://images.unsplash.com/photo-1521898284481-a5ec348cb555",
      alt: "Remote work setup",
      author: "James Rodriguez"
    },
    {
      id: 5,
      title: "Quantum Computing",
      excerpt: "Understanding the next computing revolution",
      category: "Technology",
      src: "https://images.unsplash.com/photo-1635070041078-e363dbe005cb",
      alt: "Quantum computer",
      author: "Dr. Michael Chang"
    },
  ];

  return (
    <div className="bg-gray-100 p-8">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
        {posts.map((post) => (
          <div key={post.id} 
               className="relative bg-gray-800 text-white rounded-xl overflow-hidden shadow-lg bg-blend-luminosity bg-cover bg-center"
               style={{ backgroundImage: `url(${post.src})` }}
          >
            <div className="p-6">
              <span className="text-sm font-medium text-blue-300">
                {post.category}
              </span>
              <h3 className="mt-2 text-xl font-semibold">
                {post.title}
              </h3>
              <p className="mt-3 opacity-80">{post.author}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Best Practices

Maintain Design Consistency

Background blend modes affect how multiple backgrounds interact, and inconsistent usage can create visual disruptions. For a uniform aesthetic, define blend modes based on a clear design system. For instance, if bg-blend-multiply is used in one section, similar elements should adopt the same effect rather than a mix of bg-blend-overlay and bg-blend-screen unless required for specific design variations.

Another way to maintain consistency is by aligning background blend mode choices with branding elements. If your design language includes a specific color palette, test different blend modes with those colors to ensure they harmonize rather than clash. This approach helps establish a polished visual identity.

Optimize for Reusability

Rather than manually assigning blend modes across multiple sections, encapsulate them in components to improve efficiency and reduce repetition.

For example, create a BlendedBackground component to reuse a predefined background blend structure throughout the project. This component can accept props for background images, blend modes, and opacity levels, making it adaptable for various sections while maintaining a unified design system.

If a project requires a shift in visual styling, updating a single component propagates changes across all instances where it's used, reducing redundancy.

Accessibility Considerations

Enhance Readability and Navigability

Background blend modes can impact text readability, especially when applied to high-contrast images. To improve legibility, use overlays with bg-black/50, bg-white-50 or similar utilities to soften the impact of blending while keeping text elements distinct.

Spacing is another factor to consider. Background blend modes should not interfere with content readability by creating busy or distracting visuals. Ensuring ample padding and contrast adjustments helps users navigate content without visual strain.

For structured content, avoid applying blend modes to essential UI elements such as buttons. These components require clarity, and excessive blending can obscure crucial interactive elements.

Focus on High Contrast

High contrast is critical for users with visual impairments. When using bg-blend-* utilities, confirm that foreground text retains enough contrast against the background. If contrast falls below WCAG guidelines, adjust text and background colors to improve accessibility. Testing different blend modes with light and dark backgrounds ensures that text remains readable across varied themes and designs.

A common approach to improving contrast while using bg-blend-* is adding a semi-transparent overlay(e.g., bg-black/50, bg-white-50, etc.) between the background and the content. Overlays help separate text from complex backgrounds without completely removing visual depth. Additionally, use backdrop utilities alongside blend modes to refine contrast dynamically, making designs more adaptable to different lighting conditions.

Mix Blend Mode Border Collapse