Tailwind v4 Backdrop Noise

readme.md

Usage:

<div class="text-black bg-orange-400 backdrop-noise-light">
<!-- your content -->
</div>

import React from 'react'
import { twMerge } from 'tailwind-merge'

function Component({ children, className }) {
  return (
    <div class={twMerge('text-black bg-orange-400 backdrop-noise-light', className)}>
      {children}
    </div>
  )
}

backdrop-noise.css

@import 'tailwindcss';

@utility backdrop-noise-light {
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.25;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'%3E%3C/rect%3E%3C/svg%3E");
    background-size: 150px 150px;
    background-repeat: repeat;
    background-repeat: repeat;
    z-index: 0;
  }

  & > * {
    position: relative;
    z-index: 1;
  }
}

@utility backdrop-noise-dark {
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.3;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'%3E%3C/rect%3E%3C/svg%3E");
    background-size: 150px 150px;
    background-repeat: repeat;
    z-index: 0;
  }

  & > * {
    position: relative;
    z-index: 1;
  }
}