Browser Support
Flex Direction
Flex Wrap
Justify Items
Justify Self
Menu

Tailwind CSS Brightness

Brightness in CSS refers to the adjustment of how light or dark an element, particularly an image or visual component, appears. This feature modifies the intensity of an element's colors, ranging from completely dark (black) to fully bright (white). It enables developers to control the visual tone of their design effectively, adding depth or emphasis to specific components. In CSS, the filter property includes brightness as one of its values, making it suitable for creating dynamic UI adjustments.

Tailwind CSS, as a utility-first framework, provides a range of pre-defined classes for controlling brightness using the brightness-{value} utility. These utilities remove the hassle of writing custom CSS for such adjustments, significantly speeding up the development process. With Tailwind, you can modify brightness dynamically based on screen states, breakpoints, or custom values.

ClassPropertiesExample
brightness-0filter: brightness(0);<div className="brightness-0"></div>
brightness-50filter: brightness(.5);<div className="brightness-50"></div>
brightness-75filter: brightness(.75);<div className="brightness-75"></div>
brightness-90filter: brightness(.9);<div className="brightness-90"></div>
brightness-95filter: brightness(.95);<div className="brightness-95"></div>
brightness-100filter: brightness(1);<div className="brightness-100"></div>
brightness-105filter: brightness(1.05);<div className="brightness-105"></div>
brightness-110filter: brightness(1.1);<div className="brightness-110"></div>
brightness-125filter: brightness(1.25);<div className="brightness-125"></div>
brightness-150filter: brightness(1.5);<div className="brightness-150"></div>
brightness-200filter: brightness(2);<div className="brightness-200"></div>

Overview of Brightness

Adding the Brightness

To modify brightness, simply apply one of Tailwind's brightness-{value} classes to an element. The value ranges from 0 (completely dark) to 100 (default brightness). You can also go beyond 100, with values such as 150 to emphasize visual elements.

This is a live editor. Play around with it!
// Brightness Controls
export default function BrightnessDemo() {  
  return (  
    <div className="w-screen h-screen flex items-center justify-center bg-gray-100">  
      <img  
        src="https://images.unsplash.com/photo-1488998427799-e3362cec87c3"  
        alt="Nature"  
        className="brightness-75" // Adjusting brightness to 75%  
      />  
    </div>  
  );  
}

In this code snippet, the brightness-75 utility reduces the brightness to 75%. Use any other Tailwind brightness utility to achieve a desired visual effect.

Disabling Brightness Filters

You might encounter scenarios where you want to completely remove the brightness filter applied to an element. Tailwind makes this easy with brightness-100, which resets the brightness to its default setting. You can also use filter-none to remove all filters at once.

This is a live editor. Play around with it!
// Removing Brightness Adjustments
export default function ResetBrightness() {  
  return (  
    <div className="w-screen h-screen flex items-center justify-center bg-gray-100">  
      <img  
        src="https://images.unsplash.com/photo-1488998427799-e3362cec87c3"  
        alt="Reset Brightness"  
        className="brightness-100" // Restoring default brightness  
      />  
    </div>  
  );  
}

Apply the brightness-100 utility when you need to completely remove brightness customizations.

States and Responsiveness

Tailwind lets you apply brightness utilities conditionally, whether for states like hover and focus, or across various screen sizes using responsive modifiers.

Hover and Focus States

The utility classes in Tailwind can work dynamically with pseudo-classes like hover or focus. This means you can alter brightness levels interactively.

This is a live editor. Play around with it!
// Brightness on Hover
export default function HoverBrightness() {  
  return (  
    <div className="w-screen h-screen flex items-center justify-center bg-gray-100">  
      <img  
        src="https://images.unsplash.com/photo-1488998427799-e3362cec87c3"  
        alt="Interactive Brightness"  
        className="brightness-90 hover:brightness-125 transition duration-300 ease-in-out"  
        // Default brightness is 90, increases to 125% on hover  
      />  
    </div>  
  );  
}

By assigning hover:brightness-125, the brightness increases when a user hovers over the image. The transition class adds a smooth animation.

Breakpoint Modifiers

Using Tailwind’s responsive design utilities, you can conditionally apply brightness adjustments for different screen sizes.

This is a live editor. Play around with it!
// Brightness across Breakpoints
export default function BreakpointBrightness() {  
  return (  
    <div className="w-screen h-screen flex items-center justify-center bg-gray-100">  
      <img  
        src="https://images.unsplash.com/photo-1488998427799-e3362cec87c3"  
        alt="Breakpoint Brightness"  
        className="brightness-50 md:brightness-75 lg:brightness-100"  
        // Applies brightness-50 on small screens, brightness-75 for medium screens,  
        // and brightness-100 for large screens  
      />  
    </div>  
  );  
}

Responsive utilities like md:brightness-75 or lg:brightness-100 ensure you can adapt the brightness to the current viewport size.

Custom Brightness

Beyond the built-in utilities, Tailwind offers flexibility for defining or using custom brightness values.

Extending the Theme

Custom brightness values can be added to your Tailwind configuration file, enabling you to create project-specific designs.

Once defined, these custom values are available as classes (e.g., brightness-110).

This is a live editor. Play around with it!
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

// Applying custom brightness
export default function CustomBrightness() {  
  return (  
    <div className="w-screen h-screen flex items-center justify-center bg-gray-100">  
      <img  
        src="https://images.unsplash.com/photo-1488998427799-e3362cec87c3"  
        alt="Custom Brightness"  
        className="brightness-120" // Custom brightness value from the configuration  
      />  
    </div>  
  );  
}

Using Arbitrary Values

If you want to avoid adding to the configuration file, leverage arbitrary values for brightness. By defining brightness as brightness-[value], you can avoid modifying Tailwind’s configuration for one-off cases.

This is a live editor. Play around with it!
// Arbitrary Brightness
export default function ArbitraryBrightness() {  
  return (  
    <div className="w-screen h-screen flex items-center justify-center bg-gray-100">  
      <img  
        src="https://images.unsplash.com/photo-1488998427799-e3362cec87c3"  
        alt="Arbitrary Value Usage"  
        className="brightness-[1.30]" // Applying 130% brightness  
      />  
    </div>  
  );  
}

Real World Examples

Product Showcase with Hover Brightness Effect

This component displays a grid of product cards that become brighter when hovered over, creating an engaging user experience for an e-commerce website.

This is a live editor. Play around with it!
export default function ProductShowcase() {
  const products = [
    {
      id: 1,
      name: "Premium Leather Watch",
      price: "$299.99",
      src: "https://images.unsplash.com/photo-1524592094714-0f0654e20314",
      alt: "Brown leather watch with gold face"
    },
    {
      id: 2,
      name: "Wireless Headphones",
      price: "$199.99",
      src: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e",
      alt: "Black wireless headphones"
    },
    {
      id: 3,
      name: "Mechanical Keyboard",
      price: "$159.99",
      src: "https://images.unsplash.com/photo-1511467687858-23d96c32e4ae",
      alt: "RGB mechanical keyboard"
    },
    {
      id: 4,
      name: "Smart Speaker",
      price: "$129.99",
      src: "https://images.unsplash.com/photo-1543512214-318c7553f230",
      alt: "Modern smart speaker"
    },
    {
      id: 5,
      name: "Fitness Tracker",
      price: "$89.99",
      src: "https://images.unsplash.com/photo-1575311373937-040b8e1fd5b6",
      alt: "Black fitness tracker"
    },
  ];

  return (
    <div className="grid gap-6 p-8">
      {products.map((product) => (
        <div 
          key={product.id}
          className="relative group overflow-hidden rounded-lg shadow-lg"
        >
          <img
            src={product.src}
            alt={product.alt}
            className="w-full h-64 object-cover transition-all duration-300 group-hover:brightness-125"
          />
          <div className="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-4">
            <h3 className="text-white text-xl font-bold">{product.name}</h3>
            <p className="text-white">{product.price}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

Team Member Gallery with Dimming Effect

This component showcases team members with a dimming effect when not hovered, drawing attention to the selected member.

This is a live editor. Play around with it!
export default function TeamGallery() {
  const team = [
    {
      id: 1,
      name: "Sarah Johnson",
      role: "CEO",
      src: "https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e",
      alt: "Sarah Johnson CEO portrait"
    },
    {
      id: 2,
      name: "Michael Chen",
      role: "CTO",
      src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e",
      alt: "Michael Chen CTO portrait"
    },
    {
      id: 3,
      name: "Emma Williams",
      role: "Design Director",
      src: "https://images.unsplash.com/photo-1580489944761-15a19d654956",
      alt: "Emma Williams Design Director portrait"
    },
    {
      id: 4,
      name: "James Rodriguez",
      role: "Lead Developer",
      src: "https://images.unsplash.com/photo-1519085360753-af0119f7cbe7",
      alt: "James Rodriguez Lead Developer portrait"
    },
    {
      id: 5,
      name: "Lisa Thompson",
      role: "Marketing Manager",
      src: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
      alt: "Lisa Thompson Marketing Manager portrait"
    },
    {
      id: 6,
      name: "David Kim",
      role: "Product Manager",
      src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d",
      alt: "David Kim Product Manager portrait"
    }
  ];

  return (
    <div className="p-8 bg-gray-100">
      <div className="grid grid-cols-2 md:grid-cols-3 gap-8">
        {team.map((member) => (
          <div key={member.id} className="group relative">
            <img
              src={member.src}
              alt={member.alt}
              className="w-full h-80 object-cover rounded-lg brightness-75 transition-all duration-300 group-hover:brightness-100"
            />
            <div className="absolute bottom-4 left-4 right-4 text-white">
              <h3 className="text-xl font-bold">{member.name}</h3>
              <p className="text-sm">{member.role}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Featured Article Cards with Brightness Transition

This component displays featured articles with a brightness transition effect when interacting with the cards.

This is a live editor. Play around with it!
export default function FeaturedArticles() {
  const articles = [
    {
      id: 1,
      title: "The Future of AI",
      category: "Technology",
      readTime: "5 min",
      src: "https://images.unsplash.com/photo-1485827404703-89b55fcc595e",
      alt: "AI visualization"
    },
    {
      id: 2,
      title: "Sustainable Living",
      category: "Lifestyle",
      readTime: "8 min",
      src: "https://images.unsplash.com/photo-1542601906990-b4d3fb778b09",
      alt: "Eco-friendly home"
    },
    {
      id: 3,
      title: "Modern Architecture",
      category: "Design",
      readTime: "6 min",
      src: "https://images.unsplash.com/photo-1511818966892-d7d671e672a2",
      alt: "Modern building"
    },
    {
      id: 4,
      title: "Space Exploration",
      category: "Science",
      readTime: "10 min",
      src: "https://images.unsplash.com/photo-1446776811953-b23d57bd21aa",
      alt: "Space nebula"
    },
    {
      id: 5,
      title: "Healthy Recipes",
      category: "Food",
      readTime: "4 min",
      src: "https://images.unsplash.com/photo-1490645935967-10de6ba17061",
      alt: "Healthy meal"
    },
  ];

  return (
    <div className="bg-gray-900 p-8">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {articles.map((article) => (
          <div
            key={article.id}
            className="group cursor-pointer"
          >
            <div className="relative overflow-hidden rounded-xl">
              <img
                src={article.src}
                alt={article.alt}
                className="w-full h-56 object-cover transition-all duration-500 group-hover:brightness-110 group-hover:scale-105"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent" />
              <div className="absolute bottom-4 left-4 right-4">
                <span className="text-sm text-blue-400">{article.category}</span>
                <h3 className="text-white text-xl font-bold mt-1">{article.title}</h3>
                <p className="text-gray-300 text-sm mt-2">{article.readTime} read</p>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Portfolio Gallery with Brightness States

This component creates a portfolio gallery with different brightness states for active and inactive items.

This is a live editor. Play around with it!
export default function PortfolioGallery() {
  const projects = [
    {
      id: 1,
      title: "Mobile App Design",
      category: "UI/UX",
      src: "https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c",
      alt: "Mobile app interface"
    },
    {
      id: 2,
      title: "Brand Identity",
      category: "Branding",
      src: "https://images.unsplash.com/photo-1554774853-719586f82d77",
      alt: "Brand logo design"
    },
    {
      id: 3,
      title: "Web Development",
      category: "Development",
      src: "https://images.unsplash.com/photo-1461749280684-dccba630e2f6",
      alt: "Code on screen"
    },
    {
      id: 4,
      title: "Photography",
      category: "Creative",
      src: "https://images.unsplash.com/photo-1452587925148-ce544e77e70d",
      alt: "Camera equipment"
    },
    {
      id: 5,
      title: "Motion Graphics",
      category: "Animation",
      src: "https://images.unsplash.com/photo-1551503766-ac63dfa6401c",
      alt: "Animation frames"
    },
    {
      id: 6,
      title: "Print Design",
      category: "Graphics",
      src: "https://images.unsplash.com/photo-1626785774625-0b1c09197357",
      alt: "Print materials"
    }
  ];

  return (
    <div className="p-8 bg-white">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {projects.map((project) => (
          <div
            key={project.id}
            className="group relative overflow-hidden rounded-lg"
          >
            <img
              src={project.src}
              alt={project.alt}
              className="w-full h-72 object-cover brightness-90 transition-all duration-300 group-hover:brightness-110"
            />
            <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
              <div className="absolute bottom-6 left-6">
                <p className="text-sm text-gray-300">{project.category}</p>
                <h3 className="text-2xl font-bold text-white mt-2">{project.title}</h3>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Image Gallery with Progressive Brightness

This component creates an image gallery where brightness increases progressively on hover.

This is a live editor. Play around with it!
export default function ProgressiveGallery() {
  const images = [
    {
      id: 1,
      title: "Mountain Landscape",
      src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4",
      alt: "Snow-capped mountains"
    },
    {
      id: 2,
      title: "Ocean Waves",
      src: "https://images.unsplash.com/photo-1505118380757-91f5f5632de0",
      alt: "Crashing ocean waves"
    },
    {
      id: 3,
      title: "Desert Dunes",
      src: "https://images.unsplash.com/photo-1509316785289-025f5b846b35",
      alt: "Sandy desert dunes"
    },
    {
      id: 4,
      title: "Forest Trail",
      src: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e",
      alt: "Green forest path"
    },
    {
      id: 5,
      title: "City Lights",
      src: "https://images.unsplash.com/photo-1477959858617-67f85cf4f1df",
      alt: "Night city skyline"
    },
    {
      id: 6,
      title: "Northern Lights",
      src: "https://images.unsplash.com/photo-1483347756197-71ef80e95f73",
      alt: "Aurora borealis"
    }
  ];

  return (
    <div className="p-6 bg-black">
      <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
        {images.map((image) => (
          <div
            key={image.id}
            className="relative group cursor-pointer"
          >
            <img
              src={image.src}
              alt={image.alt}
              className="w-full h-64 object-cover brightness-50 transition-all duration-500 
                group-hover:brightness-75 group-hover:scale-105"
            />
            <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
              <h3 className="text-white text-xl font-bold text-center px-4">
                {image.title}
              </h3>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Customization Examples

Product Image Hover Effect with Custom Brightness

This example demonstrates how to create a product card with a custom brightness hover effect that makes the image pop when users interact with it.

This is a live editor. Play around with it!
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

// App.js
export default function ProductCard() {
  return (
    <div className="max-w-sm mx-auto bg-white rounded-xl shadow-lg overflow-hidden">
      <div className="relative">
        <img
          src="https://images.unsplash.com/photo-1523275335684-37898b6baf30"
          alt="Premium Watch"
          className="w-full h-64 object-cover transition-all duration-300 brightness-85 hover:brightness-115"
        />
        <span className="absolute top-4 right-4 bg-red-500 text-white px-3 py-1 rounded-full text-sm">
          Sale
        </span>
      </div>
      <div className="p-6">
        <h2 className="text-xl font-semibold text-gray-800">Luxury Timepiece</h2>
        <p className="text-gray-600 mt-2">Limited Edition Collection</p>
        <div className="mt-4 flex justify-between items-center">
          <span className="text-2xl font-bold text-gray-900">$599</span>
          <button className="bg-blue-600 text-white px-4 py-2 rounded-lg">
            Add to Cart
          </button>
        </div>
      </div>
    </div>
  )
}

Dynamic Weather Widget with Brightness Adjustment

This example shows how to create a weather widget that adjusts brightness based on the time of day using custom brightness values.

This is a live editor. Play around with it!
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

// App.js
export default function WeatherWidget() {
  const isNight = new Date().getHours() > 18 || new Date().getHours() < 6;

  return (
    <div className="max-w-md mx-auto">
      <div className={`relative rounded-2xl overflow-hidden ${
        isNight ? 'bg-gray-900' : 'bg-blue-500'
      }`}>
        <img
          src="https://images.unsplash.com/photo-1534088568595-a066f410bcda"
          alt="Weather Background"
          className={`w-full h-48 object-cover ${
            isNight ? 'brightness-40' : 'brightness-95'
          }`}
        />
        <div className="absolute inset-0 p-6 text-white">
          <div className="flex justify-between items-start">
            <div>
              <h3 className="text-2xl font-bold">New York</h3>
              <p className="text-lg">Partly Cloudy</p>
            </div>
            <div className="text-4xl font-bold">24°C</div>
          </div>
          <div className="mt-8">
            <div className="flex justify-between items-center">
              <span>Humidity: 65%</span>
              <span>Wind: 12 km/h</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

Interactive Gallery with Multiple Brightness States

This example creates an interactive image gallery with different brightness levels for active, hover, and disabled states.

This is a live editor. Play around with it!
import { useState } from "react";
  import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

// App.js
export default function InteractiveGallery() {
  const [activeIndex, setActiveIndex] = useState(0);

  const images = [
    {
      url: "https://images.unsplash.com/photo-1501785888041-af3ef285b470",
      title: "Mountain Range"
    },
    {
      url: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e",
      title: "Forest Path"
    },
    {
      url: "https://images.unsplash.com/photo-1507525428034-b723cf961d3e",
      title: "Beach Sunset"
    }
  ];

  return (
    <div className="max-w-4xl mx-auto p-6">
      <div className="relative h-96 rounded-xl overflow-hidden">
        <img
          src={images[activeIndex].url}
          alt={images[activeIndex].title}
          className="w-full h-full object-cover brightness-110"
        />
        <h2 className="absolute bottom-6 left-6 text-white text-2xl font-bold">
          {images[activeIndex].title}
        </h2>
      </div>
      
      <div className="grid grid-cols-3 gap-4 mt-4">
        {images.map((image, index) => (
          <button
            key={index}
            onClick={() => setActiveIndex(index)}
            className={`relative h-32 rounded-lg overflow-hidden ${
              index === activeIndex 
                ? 'ring-2 ring-blue-500' 
                : 'brightness-75 hover:brightness-130'
            }`}
          >
            <img
              src={image.url}
              alt={image.title}
              className="w-full h-full object-cover transition-all duration-300"
            />
          </button>
        ))}
      </div>
    </div>
  )
}

Best Practices

Maintain Design Consistency

When working with brightness utilities in Tailwind CSS, you should aim to maintain a consistent design language across your application. Start by establishing a standardized set of brightness values through your Tailwind configuration file. For instance, you could define a consistent brightness scale that aligns with your branding or visual identity. Using these predefined values ensures uniformity, helping you avoid clashing visual styles.

Organize your project's components so elements with similar contexts use the same brightness utilities. For example, a hover effect for images in a product gallery should align with other hover-enabled elements. This way, the user interface feels predictable and cohesive. Mixing unrelated brightness values across pages can confuse users and dilute the quality of your design.

Lastly, consider implementing a design system or component library that leverages reusable classes for brightness and related properties. By creating reusable React components styled with Tailwind classes, you’ll promote visual and functional consistency without the risk of deviating from your chosen theme.

Leverage Utility Combinations

Combining brightness with additional Tailwind utilities unlocks the potential for more complex and visually appealing designs. Whether you're enhancing hover animations or layering multiple filters, thoughtful combinations make your components stand out. For example, combining brightness-110 with shadow-xl and hover:scale-105 can give images or cards a pristine, interactive look.

This is a live editor. Play around with it!
export default function CombinedUtilities() {  
  return (  
    <div className="grid gap-8 p-8 bg-gray-200">  
      <img  
        src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae"  
        alt="Layered Utility Effect"  
        className="w-full h-64 object-cover rounded-lg shadow-xl brightness-90 transition-transform duration-300 hover:brightness-110 hover:scale-105"  
      />  
    </div>  
  );  
}

By integrating responsive modifiers like sm: or lg:, you can scale brightness effects depending on the viewport. Layer utilities carefully to balance simplicity and functionality without overwhelming your codebase.

Accessibility Considerations

Enhance Readability and Navigability

Adjusting brightness can directly impact the readability of text and navigability of interface elements—essential for accessibility. Avoid overly dimmed imagery or backgrounds when layering text on top, as insufficient contrast degrades readability for all users, especially those with visual impairments.

Pair brightness classes with opacity utilities or Tailwind's bg-gradient-to classes to highlight foreground text without over-dimming the background. For lengthy or informational content, confirm that the brightness filter balances well with text color and size. Tools like browser contrast-checking extensions can help you determine appropriate ratios.

Interactive elements—such as call-to-action buttons—should leverage hover brightness utilities judiciously. Moderate increases in brightness (hover:brightness-110) signal interactivity without obstructing the flow of content navigation.

Focus on High Contrast

To achieve a high level of contrast, you’ll want to consider pairing darkened brightness values (brightness-50 or lower) with vibrant, high-contrast text or UI overlays. For low vision users, contrast levels defined above WCAG-compliant minimums enhance both usability and inclusion.

This is a live editor. Play around with it!
export default function HighContrastComponent() {  
  return (  
    <div className="w-full h-screen flex items-center justify-center bg-gray-900">  
      <div className="relative w-80 h-48 rounded overflow-hidden">  
        <img  
          src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae"  
          alt="High Contrast Demo"  
          className="w-full h-full object-cover brightness-50"  
        />  
        <div className="absolute inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center">  
          <p className="text-white text-2xl font-bold">High Contrast UI</p>  
        </div>  
      </div>  
    </div>  
  );  
}

Respect high-contrast design principles by using color simulators during testing to assess content clarity for audiences requiring additional support.

BlurContrast

Resources

DocsBlogEmail Templates

Legal Stuff

Terms & ConditionsPrivacy PolicyAcceptable Use Policy