Beautiful Div Box in CSS

<div class="header">
  <h1>Beautiful Div Boxes</h1>
  <p>Modern CSS box designs with stunning effects</p>
</div>

<div class="grid">
  <div class="box-shadow">
    <div class="box-content">
      <h3>Classic Shadow</h3>
      <p>Elegant shadow effect that lifts on hover. Perfect for cards and content containers with a clean, professional look.</p>
    </div>
  </div>

  <div class="box-gradient-border">
    <div class="box-content">
      <h3>Gradient Border</h3>
      <p>Beautiful gradient border effect creating a modern, eye-catching design. Great for highlighting important content.</p>
    </div>
  </div>

  <div class="box-glass">
    <div class="box-content">
      <h3>Glassmorphism</h3>
      <p>Frosted glass effect with backdrop blur. Trendy design that works beautifully over colorful backgrounds.</p>
    </div>
  </div>

  <div class="box-neon">
    <div class="box-content">
      <h3>Neon Glow</h3>
      <p>Vibrant neon glow effect perfect for dark themes. Creates an electric, futuristic aesthetic with pulsing light.</p>
    </div>
  </div>

  <div class="box-animated">
    <div class="box-content">
      <h3>Animated Gradient</h3>
      <p>Smoothly shifting gradient background that creates a dynamic, living design. Captures attention effortlessly.</p>
    </div>
  </div>

  <div class="box-neuro">
    <div class="box-content">
      <h3>Neumorphism</h3>
      <p>Soft, subtle 3D effect that appears to push out from the background. Modern take on skeuomorphic design.</p>
    </div>
  </div>

  <div class="box-floating">
    <div class="box-content">
      <h3>Floating Card</h3>
      <p>Gentle floating animation that adds life to your content. Creates a sense of lightness and movement.</p>
    </div>
  </div>

  <div class="box-border">
    <div class="box-content">
      <h3>Bordered Hover</h3>
      <p>Animated gradient border appears on hover with a subtle scale effect. Provides engaging user interaction.</p>
    </div>
  </div>

  <div class="box-icon">
    <div class="box-content">
      <h3>Icon Background</h3>
      <p>Decorative icon in the background adds visual interest. Clean design with subtle decorative elements.</p>
    </div>
  </div>
</div>

   * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #ffd7e0 0%, #ffe5ec 100%);
            min-height: 100vh;
            padding: 40px 20px;
        }

        .header {
            text-align: center;
            margin-bottom: 50px;
        }

        .header h1 {
            font-size: 3rem;
            font-weight: 300;
            color: #ff8fa3;
            margin-bottom: 10px;
        }

        .header p {
            font-size: 1.1rem;
            color: #666;
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            max-width: 1400px;
            margin: 0 auto;
        }

        /* Box 1: Classic Shadow */
        .box-shadow {
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(255, 143, 163, 0.3);
            transition: all 0.3s ease;
        }

        .box-shadow:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(255, 143, 163, 0.4);
        }

        /* Box 2: Gradient Border */
        .box-gradient-border {
            background: white;
            padding: 30px;
            border-radius: 15px;
            position: relative;
            overflow: hidden;
        }

        .box-gradient-border::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 15px;
            padding: 3px;
            background: linear-gradient(135deg, #ff8fa3 0%, #ff6b81 100%);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
        }

        /* Box 3: Glassmorphism */
        .box-glass {
            background: rgba(255, 255, 255, 0.25);
            backdrop-filter: blur(10px);
            padding: 30px;
            border-radius: 15px;
            border: 2px solid rgba(255, 143, 163, 0.3);
            box-shadow: 0 8px 32px rgba(255, 143, 163, 0.2);
            transition: all 0.3s ease;
        }

        .box-glass:hover {
            background: rgba(255, 255, 255, 0.35);
            border-color: rgba(255, 143, 163, 0.5);
        }

        /* Box 4: Neon Glow */
        .box-neon {
            background: #1a1a1a;
            padding: 30px;
            border-radius: 15px;
            border: 2px solid #ff8fa3;
            box-shadow: 0 0 20px rgba(255, 143, 163, 0.5),
                        inset 0 0 20px rgba(255, 143, 163, 0.1);
            transition: all 0.3s ease;
        }

        .box-neon:hover {
            box-shadow: 0 0 40px rgba(255, 143, 163, 0.8),
                        inset 0 0 30px rgba(255, 143, 163, 0.2);
        }

        .box-neon h3,
        .box-neon p {
            color: white;
        }

        /* Box 5: Animated Gradient */
        .box-animated {
            background: linear-gradient(135deg, #ff8fa3 0%, #ff6b81 50%, #ff8fa3 100%);
            background-size: 200% 200%;
            padding: 30px;
            border-radius: 15px;
            animation: gradientShift 3s ease infinite;
            box-shadow: 0 10px 30px rgba(255, 143, 163, 0.4);
        }

        .box-animated h3,
        .box-animated p {
            color: white;
        }

        @keyframes gradientShift {
            0%, 100% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
        }

        /* Box 6: Neumorphism */
        .box-neuro {
            background: #ffd7e0;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 8px 8px 16px rgba(255, 143, 163, 0.3),
                        -8px -8px 16px rgba(255, 255, 255, 0.8);
            transition: all 0.3s ease;
        }

        .box-neuro:hover {
            box-shadow: 4px 4px 8px rgba(255, 143, 163, 0.3),
                        -4px -4px 8px rgba(255, 255, 255, 0.8);
        }

        /* Box 7: Floating Card */
        .box-floating {
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(255, 143, 163, 0.2);
            animation: float 3s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-15px);
            }
        }

        /* Box 8: Bordered Hover */
        .box-border {
            background: white;
            padding: 30px;
            border-radius: 15px;
            border: 3px solid transparent;
            transition: all 0.3s ease;
            position: relative;
        }

        .box-border::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 15px;
            padding: 3px;
            background: linear-gradient(135deg, #ff8fa3, #ff6b81, #ff8fa3);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .box-border:hover::before {
            opacity: 1;
        }

        .box-border:hover {
            transform: scale(1.05);
        }

        /* Box 9: Card with Icon */
        .box-icon {
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(255, 143, 163, 0.2);
            position: relative;
            overflow: hidden;
        }

        .box-icon::before {
            content: '★';
            position: absolute;
            top: -20px;
            right: -20px;
            font-size: 100px;
            color: #ff8fa3;
            opacity: 0.1;
            transform: rotate(15deg);
        }

        /* Common Box Content Styles */
        .box-content h3 {
            font-size: 1.5rem;
            color: #ff8fa3;
            margin-bottom: 15px;
            font-weight: 600;
        }

        .box-content p {
            color: #666;
            line-height: 1.6;
            font-size: 0.95rem;
        }

        .box-neon .box-content h3 {
            color: #ff8fa3;
        }

        .box-neon .box-content p {
            color: #ddd;
        }

        @media (max-width: 768px) {
            .header h1 {
                font-size: 2rem;
            }

            .grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
        }