Browser Support
Flex Direction
Flex Wrap
Flex
Flex Basis
Menu

Tailwind CSS Opacity

Opacity is a CSS property used to control the transparency level of an element, making it partially or entirely see-through. When you adjust the opacity of an element, you also affect the appearance of its child elements. A value of 1 represents full opacity (completely visible), whereas a value of 0 represents full transparency (completely invisible).

Tailwind CSS provides an extensive list of utility classes to modify opacity. These utilities make it effortless to control the transparency of any element at different breakpoints or interaction states like hover and focus. You can even create custom opacity levels tailored to specific project requirements. This guide covers everything you need to work with opacity in Tailwind CSS, ensuring you can implement it easily in your projects.

ClassPropertiesExample
opacity-0opacity: 0;<div className="opacity-0"></div>
opacity-5opacity: 0.05;<div className="opacity-5"></div>
opacity-10opacity: 0.1;<div className="opacity-10"></div>
opacity-15opacity: 0.15;<div className="opacity-15"></div>
opacity-20opacity: 0.2;<div className="opacity-20"></div>
opacity-25opacity: 0.25;<div className="opacity-25"></div>
opacity-30opacity: 0.3;<div className="opacity-30"></div>
opacity-35opacity: 0.35;<div className="opacity-35"></div>
opacity-40opacity: 0.4;<div className="opacity-40"></div>
opacity-45opacity: 0.45;<div className="opacity-45"></div>
opacity-50opacity: 0.5;<div className="opacity-50"></div>
opacity-55opacity: 0.55;<div className="opacity-55"></div>
opacity-60opacity: 0.6;<div className="opacity-60"></div>
opacity-65opacity: 0.65;<div className="opacity-65"></div>
opacity-70opacity: 0.7;<div className="opacity-70"></div>
opacity-75opacity: 0.75;<div className="opacity-75"></div>
opacity-80opacity: 0.8;<div className="opacity-80"></div>
opacity-85opacity: 0.85;<div className="opacity-85"></div>
opacity-90opacity: 0.9;<div className="opacity-90"></div>
opacity-95opacity: 0.95;<div className="opacity-95"></div>
opacity-100opacity: 1;<div className="opacity-100"></div>

Overview of Opacity

Adding the Opacity

For changing an element’s transparency, simply apply one of the opacity utility classes in your JSX. Below is an example that adjusts the opacity of a background image:

This is a live editor. Play around with it!
export default function TransparentImage() {
  return (
    <div className="w-screen h-screen flex items-center justify-center bg-gray-800">
      {/* Applies 50% Opacity */}
      <img
        src="https://images.unsplash.com/photo-1488998427799-e3362cec87c3"
        alt="Sample"
        className="opacity-50"
      />
    </div>
  );
}

States and Responsiveness

One of Tailwind's most advantageous features is its ability to adapt styles based on interaction states or screen sizes. With opacity utilities, you can apply conditional styling dynamically.

Hover and Focus States

Want an element to become more or less visible when hovered over or focused? Tailwind’s state modifiers like hover: and focus: allow you to achieve this seamlessly.

This is a live editor. Play around with it!
export default function InteractiveButton() {
  return (
    <div className="w-screen h-screen flex items-center justify-center bg-gray-100">
      {/* Hover increases opacity */}
      <button className="bg-blue-500 opacity-50 hover:opacity-100 text-white font-bold py-2 px-4 rounded">
        Hover over me
      </button>
    </div>
  );
}

What happens here?

  • The button starts with 50% opacity (opacity: 0.5;).
  • When hovered (hover:opacity-100), the opacity changes to full visibility (opacity: 1;).

Breakpoint Modifiers

You might want different opacity settings for various screen sizes—for instance, more transparency on smaller devices and full visibility on larger screens. Tailwind's responsive design capabilities make this simple with breakpoint-specific modifiers.

This is a live editor. Play around with it!
export default function ResponsiveImage() {
  return (
    <div className="w-screen h-screen flex items-center justify-center bg-gray-200">
      {/* Apply 30% opacity on small screens, 100% opacity on large screens */}
      <img
        src="https://images.unsplash.com/photo-1488998427799-e3362cec87c3"
        alt="Responsive"
        className="opacity-30 sm:opacity-50 lg:opacity-100"
      />
    </div>
  );
}

Here’s what’s happening:

  • opacity-30 applies to all screen sizes by default.
  • sm:opacity-50 overrides the opacity for small screens (sm breakpoint).
  • lg:opacity-100 fully overrides opacity for large screens (lg breakpoint).

Custom Opacity

Although Tailwind provides a comprehensive set of predefined opacity utilities, there may be instances where project requirements demand custom values. In such cases, you can customize the theme configuration or use arbitrary values directly in your JSX.

Extending the Theme

If you frequently need non-standard opacity values, you can define custom utilities by extending Tailwind's default configuration in the tailwind.config.js file.

Once you’ve added the custom values to your configuration file, you can reference them just like any other utility class:

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

export default function CustomOpacityDemo() {
  return (
    <div className="w-screen h-screen flex items-center justify-center bg-gray-100">
      {/* Apply custom opacity of 15% */}
      <img
        src="https://images.unsplash.com/photo-1488998427799-e3362cec87c3"
        alt="Custom Opacity"
        className="opacity-17"
      />
    </div>
  );
}

Using Arbitrary Values

For even more flexibility, Tailwind allows arbitrary values to be applied directly in your JSX without modifying the theme configuration. This is especially useful for one-off styles.

This is a live editor. Play around with it!
export default function ArbitraryValueDemo() {
  return (
    <div className="w-screen h-screen flex items-center justify-center bg-gray-700">
      {/* Apply arbitrary opacity of 73% */}
      <img
        src="https://images.unsplash.com/photo-1488998427799-e3362cec87c3"
        alt="Arbitrary Opacity"
        className="opacity-[0.73]"
      />
    </div>
  );
}

Here, the class opacity-[0.73] explicitly sets the opacity level to 0.73, bypassing the need for pre-configured utilities. Arbitrary values are especially helpful in prototyping or when you need fine-grained control over your element's styles.

Real World Examples

Product Card Grid with Hover Opacity

Description: Create an e-commerce product grid where cards become more opaque on hover, providing visual feedback to users browsing through items.

This is a live editor. Play around with it!
export default function ProductGrid() {
  const products = [
    {
      id: 1,
      name: "Premium Leather Backpack",
      price: "$129.99",
      src: "https://images.unsplash.com/photo-1548036328-c9fa89d128fa",
      alt: "Brown leather backpack"
    },
    {
      id: 2,
      name: "Wireless Headphones",
      price: "$199.99",
      src: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e",
      alt: "Black wireless headphones"
    },
    {
      id: 3,
      name: "Smart Watch",
      price: "$299.99",
      src: "https://images.unsplash.com/photo-1546868871-7041f2a55e12",
      alt: "Modern smartwatch"
    },
    {
      id: 4,
      name: "Mechanical Keyboard",
      price: "$159.99",
      src: "https://images.unsplash.com/photo-1587829741301-dc798b83add3",
      alt: "RGB mechanical keyboard"
    },
    {
      id: 5,
      name: "Camera Lens",
      price: "$899.99",
      src: "https://images.unsplash.com/photo-1516035069371-29a1b244cc32",
      alt: "Professional camera lens"
    },
    {
      id: 6,
      name: "Gaming Mouse",
      price: "$79.99",
      src: "https://images.unsplash.com/photo-1527814050087-3793815479db",
      alt: "RGB gaming mouse"
    }
  ];

  return (
    <div className="grid gap-6 p-8">
      {products.map((product) => (
        <div
          key={product.id}
          className="bg-white rounded-lg shadow-lg opacity-90 hover:opacity-100 transition-opacity duration-300"
        >
          <img
            src={product.src}
            alt={product.alt}
            className="w-full h-48 object-cover rounded-t-lg"
          />
          <div className="p-4">
            <h3 className="text-xl font-semibold">{product.name}</h3>
            <p className="text-gray-600">{product.price}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

Testimonial Carousel with Fade Effect

Description: Display customer testimonials with a fade effect using opacity transitions.

This is a live editor. Play around with it!
export default function TestimonialCarousel() {
  const testimonials = [
    {
      id: 1,
      name: "Sarah Johnson",
      role: "Marketing Director",
      text: "This product transformed our workflow completely!",
      src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
      alt: "Sarah Johnson profile"
    },
    {
      id: 2,
      name: "Michael Chen",
      role: "Software Engineer",
      text: "The best solution I've found for our team's needs.",
      src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d",
      alt: "Michael Chen profile"
    },
    {
      id: 3,
      name: "Emma Davis",
      role: "Product Manager",
      text: "Incredible features and amazing customer support.",
      src: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
      alt: "Emma Davis profile"
    },
    {
      id: 4,
      name: "James Wilson",
      role: "CEO",
      text: "Game-changing platform for our business growth.",
      src: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e",
      alt: "James Wilson profile"
    },
    {
      id: 5,
      name: "Lisa Rodriguez",
      role: "UX Designer",
      text: "Intuitive interface and powerful capabilities.",
      src: "https://images.unsplash.com/photo-1534528741775-53994a69daeb",
      alt: "Lisa Rodriguez profile"
    },
    {
      id: 6,
      name: "David Kim",
      role: "CTO",
      text: "Outstanding performance and reliability.",
      src: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d",
      alt: "David Kim profile"
    }
  ];

  return (
    <div className="flex overflow-x-auto space-x-6 p-8">
      {testimonials.map((testimonial) => (
        <div
          key={testimonial.id}
          className="flex-none w-80 bg-gradient-to-br from-purple-500 to-pink-500 p-6 rounded-xl opacity-75 hover:opacity-100 transition-opacity duration-300"
        >
          <img
            src={testimonial.src}
            alt={testimonial.alt}
            className="w-16 h-16 rounded-full mb-4"
          />
          <p className="text-white mb-4">{testimonial.text}</p>
          <h4 className="text-white font-bold">{testimonial.name}</h4>
          <p className="text-white opacity-80">{testimonial.role}</p>
        </div>
      ))}
    </div>
  );
}

Feature Section with Opacity Layers

Description: Create a feature section with overlapping elements and varying opacity levels.

This is a live editor. Play around with it!
export default function FeatureSection() {
  const features = [
    {
      id: 1,
      title: "Analytics Dashboard",
      description: "Real-time data visualization",
      icon: "https://images.unsplash.com/photo-1551288049-bebda4e38f71",
      alt: "Analytics dashboard icon"
    },
    {
      id: 2,
      title: "Team Collaboration",
      description: "Seamless team communication tools",
      icon: "https://images.unsplash.com/photo-1522071820081-009f0129c71c",
      alt: "Team collaboration icon"
    },
    {
      id: 3,
      title: "API Integration",
      description: "Connect with your favorite tools",
      icon: "https://images.unsplash.com/photo-1558494949-ef010cbdcc31",
      alt: "API integration icon"
    },
    {
      id: 4,
      title: "Mobile Access",
      description: "Work from anywhere, anytime",
      icon: "https://images.unsplash.com/photo-1511707171634-5f897ff02aa9",
      alt: "Mobile access icon"
    },
  ];

  return (
    <div className="relative bg-gray-900 p-12">
      <div className="absolute inset-0 bg-blue-500 opacity-10"></div>
      <div className="relative z-10 grid gap-8">
        {features.map((feature) => (
          <div
            key={feature.id}
            className="bg-white/20 backdrop-blur-lg rounded-lg p-6 hover:bg-white/30 transition-all duration-300"
          >
            <img
              src={feature.icon}
              alt={feature.alt}
              className="w-12 h-12 object-cover rounded-lg mb-4"
            />
            <h3 className="text-white text-xl font-bold mb-2">{feature.title}</h3>
            <p className="text-white opacity-75">{feature.description}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

Team Member Gallery with Opacity Effects

Description: Display team members with opacity-based hover effects and overlays.

This is a live editor. Play around with it!
export default function TeamGallery() {
  const team = [
    {
      id: 1,
      name: "Alex Thompson",
      role: "Lead Developer",
      src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e",
      alt: "Alex Thompson profile"
    },
    {
      id: 2,
      name: "Maria Garcia",
      role: "UI/UX Designer",
      src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
      alt: "Maria Garcia profile"
    },
    {
      id: 3,
      name: "John Smith",
      role: "Product Manager",
      src: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e",
      alt: "John Smith profile"
    },
    {
      id: 4,
      name: "Sophie Chen",
      role: "Marketing Lead",
      src: "https://images.unsplash.com/photo-1534528741775-53994a69daeb",
      alt: "Sophie Chen profile"
    },
    {
      id: 5,
      name: "Robert Lee",
      role: "Backend Developer",
      src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d",
      alt: "Robert Lee profile"
    },
    {
      id: 6,
      name: "Emily Wilson",
      role: "Content Strategist",
      src: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
      alt: "Emily Wilson profile"
    }
  ];

  return (
    <div className="grid gap-4 p-8 bg-gray-100">
      {team.map((member) => (
        <div
          key={member.id}
          className="relative group"
        >
          <img
            src={member.src}
            alt={member.alt}
            className="w-full h-64 object-cover rounded-lg"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-90 transition-opacity duration-300 rounded-lg">
            <div className="absolute bottom-0 left-0 p-6">
              <h3 className="text-white text-xl font-bold">{member.name}</h3>
              <p className="text-white opacity-75">{member.role}</p>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

Portfolio Project Showcase with Opacity Transitions

Description: Create a portfolio showcase with opacity-based hover effects and project details.

This is a live editor. Play around with it!
export default function PortfolioShowcase() {
  const projects = [
    {
      id: 1,
      title: "E-commerce Platform",
      category: "Web Development",
      src: "https://images.unsplash.com/photo-1460925895917-afdab827c52f",
      alt: "E-commerce project thumbnail"
    },
    {
      id: 2,
      title: "Mobile Banking App",
      category: "UI/UX Design",
      src: "https://images.unsplash.com/photo-1563986768609-322da13575f3",
      alt: "Banking app thumbnail"
    },
    {
      id: 3,
      title: "Social Media Dashboard",
      category: "Web Analytics",
      src: "https://images.unsplash.com/photo-1551288049-bebda4e38f71",
      alt: "Dashboard thumbnail"
    },
    {
      id: 4,
      title: "Fitness Tracking App",
      category: "Mobile Development",
      src: "https://images.unsplash.com/photo-1461773518188-b3e86f98242f",
      alt: "Fitness app thumbnail"
    },
    {
      id: 5,
      title: "Restaurant Website",
      category: "Web Design",
      src: "https://images.unsplash.com/photo-1517248135467-4c7edcad34c4",
      alt: "Restaurant website thumbnail"
    },
    {
      id: 6,
      title: "Travel Blog Platform",
      category: "Content Management",
      src: "https://images.unsplash.com/photo-1469854523086-cc02fe5d8800",
      alt: "Travel blog thumbnail"
    }
  ];

  return (
    <div className="grid grid-cols-1 gap-8 p-12 bg-gray-900">
      {projects.map((project) => (
        <div
          key={project.id}
          className="relative overflow-hidden rounded-xl group"
        >
          <img
            src={project.src}
            alt={project.alt}
            className="w-full h-80 object-cover transform group-hover:scale-110 transition-transform duration-500"
          />
          <div className="absolute inset-0 bg-black opacity-0 group-hover:opacity-75 transition-opacity duration-300">
            <div className="absolute inset-0 flex flex-col justify-center items-center text-white p-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-100">
              <h3 className="text-2xl font-bold mb-2">{project.title}</h3>
              <p className="text-lg opacity-80">{project.category}</p>
              <button className="mt-4 px-6 py-2 border-2 border-white rounded-full hover:bg-white hover:text-black transition-colors duration-300">
                View Project
              </button>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

Customization Examples

Product Card with Dynamic Opacity Overlay

A product card component with a custom opacity overlay that reveals product details on hover. The opacity values are customized in the theme configuration.

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="relative max-w-sm overflow-hidden rounded-xl">
      <img
        src="https://images.unsplash.com/photo-1542291026-7eec264c27ff"
        alt="Product"
        className="w-full h-[400px] object-cover"
      />
      <div className="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-initial hover:opacity-overlay transition-opacity duration-300">
        <div className="absolute bottom-0 p-6 text-white">
          <h2 className="text-2xl font-bold">Limited Edition Sneakers</h2>
          <p className="mt-2">$199.99</p>
          <button className="mt-4 px-6 py-2 bg-white text-black rounded-full">
            Add to Cart
          </button>
        </div>
      </div>
    </div>
  )
}

Hero Section with Parallax Background

A hero section with a custom opacity overlay on a parallax background image. Different opacity values are used for text visibility and background elements.

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

// App.js
export default function HeroSection() {
  return (
    <div className="relative h-screen">
      <div 
        className="absolute inset-0 bg-cover bg-center bg-fixed"
        style={{
          backgroundImage: "url('https://images.unsplash.com/photo-1519681393784-d120267933ba')"
        }}
      />
      <div className="absolute inset-0 bg-black opacity-bg" />
      <div className="relative flex items-center justify-center h-full">
        <div className="text-center text-white opacity-text">
          <h1 className="text-6xl font-bold mb-6">Explore Nature</h1>
          <p className="text-xl mb-8 max-w-2xl mx-auto">
            Discover the world's most breathtaking landscapes
          </p>
          <div className="space-x-4">
            <button className="bg-white text-black px-8 py-3 rounded-lg opacity-accent hover:opacity-text transition-opacity">
              Start Journey
            </button>
            <button className="border-2 border-white px-8 py-3 rounded-lg opacity-accent hover:opacity-text transition-opacity">
              Learn More
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}

Modal Dialog with Backdrop

A modal component with custom backdrop opacity and content transitions. The opacity values are customized for both the backdrop and modal content.

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

// App.js
export default function Modal() {
  return (
    <div className="fixed inset-0 flex items-center justify-center">
      <div className="absolute inset-0 bg-black opacity-backdrop" />
      <div className="relative bg-white rounded-2xl p-8 max-w-md w-full opacity-content shadow-xl">
        <div className="flex justify-between items-center mb-6">
          <h2 className="text-2xl font-semibold">Subscribe to Newsletter</h2>
          <button className="text-gray-500 hover:text-gray-700">
            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
        <div className="space-y-4">
          <input
            type="email"
            placeholder="Enter your email"
            className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
          />
          <button className="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700">
            Subscribe Now
          </button>
          <button className="w-full text-gray-500 opacity-disabled hover:opacity-content transition-opacity">
            Maybe Later
          </button>
        </div>
      </div>
    </div>
  )
}

Best Practices

Maintain Design Consistency

Tailwind CSS provides an extensive range of opacity utilities, and using these within a project requires thoughtful consistency. You should establish a palette or scale of opacity levels at the start of the project to ensure a seamless design language. This means consistently reusing predetermined opacity classes, like opacity-50 or opacity-75, rather than relying on arbitrary values across components. This approach avoids visual dissonance and ensures all interactive and static elements align with your project's aesthetic.

Another effective strategy for consistency is maintaining a deliberate relationship between opacity and other styles such as colors and borders. For instance, pairing a background with low opacity (opacity-25) and a contrasting border ensures an element remains visually distinct, even with transparency applied. This styling logic can be reused in buttons, modals, and overlays, creating a cohesive user interface.

You should also use consistent hover and focus states whenever opacity is toggled. For instance, if one button increases opacity on hover (hover:opacity-90), ensure all buttons maintain a similar approach. Avoid arbitrary deviations such as reducing opacity on some buttons during hover while increasing it for others. Uniformity in interaction states enhances usability and reinforces branding.

Balance with Other Layout Properties

Opacity should always complement, rather than compete with, the layout and structure of your components. When applying low-opacity backgrounds, balance them with spacing utilities (p-4, m-4) to define visual boundaries. This avoids a crowded look where key elements become difficult to distinguish.

For elements like cards, use box-shadow alongside opacity. For instance, a rounded-lg shadow-lg opacity-80 card balances transparency with depth. Additionally, combining opacity with w- or h- classes ensures layouts remain well-structured, as the transparency does not detract from the element’s dimensions.

Accessibility Considerations

Enhance Readability and Navigability

When using opacity for text or overlays, readability must remain your primary focus. Text with reduced opacity, such as text-gray-700 opacity-50, may enhance aesthetics, but test its clarity against its background. Opt for opacity levels that retain sufficient contrast under WCAG guidelines for readability.

You can also ensure navigability by combining opacity with legible font sizes or heavier font weights. For instance, a headline styled with font-bold opacity-75 remains legible while adding a subtle transparent effect. Place primary calls-to-action or key navigational cues in areas with little or no background transparency, ensuring users can engage with them easily.

When using highly transparent overlays (opacity-10), ensure that elements beneath them don't create visual interference. Overlays are particularly useful for dimming backgrounds or directing attention, but overuse or poor layering can result in clutter, affecting the user journey.

Support Accessible Interactive Elements

Interactive components like buttons, dropdown menus, and carousels must be accessible to a wide audience. Tailwind's opacity utilities paired with variant modifiers ensure visual states align with user expectations. For example, use hover:opacity-100 to highlight buttons on hover and focus:opacity-90 for keyboard navigability.

For disabled states, applying reduced opacity (opacity-25) signals inactivity while ensuring the component remains distinguishable.

Keyboard navigation requires that active or selected elements be emphasized visually. Use opacity animation utilities like transition-opacity to create smooth transitions for focus states without causing abrupt changes or confusion for users relying on assistive devices.

Debugging Common Issues

Resolve Common Problems

Opacity often causes content to become hidden unintentionally, especially in nested components with conflicting styles. For instance, a parent element with opacity-50 will cascade this transparency to its child elements, making them harder to read. To fix this, apply opacity only at the necessary level instead of parent containers.

If your layout feels "flat" due to opacity, consider augmenting it with shadows or borders for better depth perception. A card styled with shadow-lg opacity-75 instantly pops, even when transparency is applied.

Iterative Testing and Maintenance

Testing opacity-related changes incrementally allows you to isolate potential layout or alignment errors early. For instance, test components in isolation before integrating nested structures that inherit parent transparency. Tools like Tailwind Play provide an excellent platform for experimenting with utility combinations.

Apply version control practices to maintain style consistency. Testing opacity changes across breakpoints ensures no unexpected behavior arises in responsive designs. Additionally, add unit tests for critical interface elements involving opacity transitions to catch regressions during updates.

Regularly review component-level transparency adjustments during code reviews or collaborative design QA sessions. Aim to document utility combinations extensively, reducing the learning curve for future developers making related changes.

Ring Offset ColorBox Shadow

Resources

DocsBlogEmail Templates

Legal Stuff

Terms & ConditionsPrivacy PolicyAcceptable Use Policy