How to implement:

With tailwind installed in your project tutorial, implement these tailwind classes in your parent div where it will reflect the background.

Code:

import React from 'react';

const GlassBackground = () => {
  return (
    <div className="relative w-full h-screen bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center">
      <div className="absolute inset-0 bg-noise opacity-20"></div>
      <div className="relative flex justify-center items-center h-[600px] w-[1000px] z-10 backdrop-blur-sm bg-white/10 p-10 rounded-2xl shadow-lg border border-white/30">
      
      </div>
    </div>
  );
};

export default GlassBackground;

View background:

Responsive: Mobile and desktop:

Note

If this background has served you in any way, consider following me on github or supporting me to continue working at BacksEasy.