CSS glassy slightly folded borders | Pure CSS folded-corner effect

Creating a glassy, slightly folded 3D border effect using CSS involves combining gradients, box shadows, and transparency to mimic depth and light. Here’s how you can achieve this step by step.

Beautiful CSS 3D Transform Examples

.anna {
  padding:20px;
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.16), 0 4px 6px rgba(0,0,0,0.45);
  border-radius: 10px;
 }

<!DOCTYPE html>
<html>
<body>
  <div class="anna">
  </div>
</body>
</html>

Glassy Folded 3D Border

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Glassy Folded 3D Border</title>
  <style>
    body {
      background: linear-gradient(135deg, #2a2a72, #009ffd);
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0;
      font-family: Arial, sans-serif;
    }

    .glassy-border {
      width: 300px;
      height: 200px;
      background: rgba(255, 255, 255, 0.2); /* Semi-transparent glass effect */
      backdrop-filter: blur(8px); /* Background blur */
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.3);
      position: relative;
      overflow: hidden;
      box-shadow: 
        4px 4px 10px rgba(0, 0, 0, 0.4), /* Outer shadow */
        inset -4px -4px 8px rgba(255, 255, 255, 0.3); /* Inner highlight */
    }

    .glassy-border::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(145deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
      mix-blend-mode: screen;
    }

    .glassy-border::after {
      content: '';
      position: absolute;
      bottom: -10px;
      right: -10px;
      width: 120%;
      height: 120%;
      background: radial-gradient(
        circle at bottom right, 
        rgba(255, 255, 255, 0.2), 
        rgba(255, 255, 255, 0)
      );
      transform: rotate(-5deg);
      z-index: -1;
    }
  </style>
</head>
<body>
  <div class="glassy-border"></div>
</body>
</html>

Explanation

Background and Transparency:
- The container uses a rgba(255, 255, 255, 0.2) background to achieve the glassy look.
- The backdrop-filter: blur(8px) adds a blur effect to the content behind the element.
Border and Shadows:
- border: 1px solid rgba(255, 255, 255, 0.3) creates a subtle transparent border.
- The box-shadow has:
  - An outer shadow for depth: 4px 4px 10px rgba(0, 0, 0, 0.4).
  - An inset shadow for the “folded edge” look: inset -4px -4px 8px rgba(255, 255, 255, 0.3).
Gradient Overlays:
- ::before: Adds a soft gradient overlay with linear-gradient for a light reflection effect.
- ::after: Adds a radial gradient to create a glowing, folded illusion near the edges.
Responsive Behavior:
- The glassy border will adjust seamlessly to different screen sizes thanks to percentage-based dimensions and gradients.

Customization

Colors: Modify the gradient in background and ::before to match your design.
Shape: Change border-radius for a sharper or more rounded effect.
Depth: Adjust the box-shadow values for stronger or subtler 3D effects.

This approach creates a modern, sleek, and interactive border effect perfect for web components or card designs. Let me know if you need further tweaks!

Glassy Folded Border CSS

Here’s another example of a glassy, slightly folded 3D border effect using CSS. This version uses layered gradients and shadows to create a more pronounced folded appearance.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Glassy Folded Border</title>
  <style>
    body {
      margin: 0;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #1a1a2e;
      background: linear-gradient(135deg, #16213e, #0f3460);
      font-family: Arial, sans-serif;
    }

    .glassy-folded {
      width: 350px;
      height: 220px;
      background: rgba(255, 255, 255, 0.15); /* Glass-like transparency */
      border-radius: 15px;
      position: relative;
      overflow: hidden;
      border: 2px solid rgba(255, 255, 255, 0.25);
      box-shadow: 
        6px 6px 15px rgba(0, 0, 0, 0.6), /* Outer shadow for depth */
        inset 3px 3px 8px rgba(255, 255, 255, 0.2), /* Inner highlight */
        inset -3px -3px 8px rgba(0, 0, 0, 0.3); /* Inner shadow */
    }

    .glassy-folded::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(120deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 70%);
      pointer-events: none; /* Ensure it doesn't block user interactions */
    }

    .glassy-folded::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: radial-gradient(
        circle at bottom right,
        rgba(255, 255, 255, 0.15),
        transparent
      );
      transform: rotate(-5deg);
      pointer-events: none;
    }

    /* Optional: Adding Text or Content Inside */
    .glassy-folded span {
      position: absolute;
      bottom: 20px;
      right: 20px;
      color: rgba(255, 255, 255, 0.8);
      font-size: 18px;
      font-weight: bold;
      text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    }
  </style>
</head>
<body>
  <div class="glassy-folded">
    <span>Glassy Fold</span>
  </div>
</body>
</html>

How It Works

Base Container (.glassy-folded):
- The background uses rgba(255, 255, 255, 0.15) for a frosted glass effect.
- border-radius: 15px ensures smooth rounded corners.
- box-shadow:
  - Outer shadow (6px 6px 15px) adds depth.
  - Inset highlights and shadows (inset) give a 3D folded effect inside the element.
Gradient Layers:
- ::before:
  - A linear gradient mimics light reflection across the surface, angled at 120deg for realism.
- ::after:
  - A radial gradient creates a glowing or folded edge effect near the bottom-right corner.
Responsive and Accessible:
- Shadows and gradients adapt dynamically, creating a 3D look regardless of container size.
- Text inside (<span>) is styled with subtle shadows for readability.

Customizations

Folded Angle: Adjust 120deg in the ::before gradient or rotate(-5deg) in ::after for different light or fold effects.
Color Scheme: Replace the background gradient in body and adjust the ::before and ::after gradients to match your design.
Shape: Modify border-radius for sharp or more rounded corners.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glassy Effect with Folded Borders</title>
    <style>
        body {
            background-image: url('your-background-image.jpg'); /* Use your own background image */
            background-size: cover;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .glass {
            background: rgba(255, 255, 255, 0.3); /* Semi-transparent background */
            backdrop-filter: blur(10px); /* Blur effect */
            border-radius: 15px; /* Rounded corners */
            border: 1px solid rgba(255, 255, 255, 0.5); /* Light border for contrast */
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Shadow for depth */
            padding: 20px; /* Inner spacing */
            width: 300px; /* Width of the glassy box */
            text-align: center; /* Center text */
        }

        h1 {
            margin: 0;
            color: #fff; /* Text color */
        }
    </style>
</head>
<body>

<div class="glass">
    <h1>Glassy Effect</h1>
    <p>This is a frosted glass effect with slightly folded borders.</p>
</div>

</body>
</html>

Explanation of CSS Properties

Background: The rgba(255, 255, 255, 0.3) creates a semi-transparent white background that allows the underlying content to be visible.
Backdrop Filter: The backdrop-filter: blur(10px) applies a blur effect to anything behind the element, enhancing the glass-like appearance.
Border Radius: The border-radius: 15px softens the edges of the element.
Border: A semi-transparent border adds definition and enhances the visual appeal.
Box Shadow: The box-shadow property creates an illusion of depth, making the element appear elevated above the background.

Additional Tips

Experiment with Colors: Adjust the RGBA values to achieve different colors and opacities for your glass effect.
Responsive Design: Ensure that your design is responsive by using relative units (like percentages) for widths and heights where applicable.
Browser Support: Be mindful that the backdrop-filter property may not be supported in all browsers. Check compatibility and consider fallbacks if necessary.

CSS glassy slightly folded borders | Pure CSS folded-corner effect

This code is perfect for creating modern cards, UI panels, or hero elements with a stylish 3D folded effect. Let me know if you’d like help tweaking it further!

Written By

vijay1983

CSS 3D Borders and Gradients 2025

CSS 3D Borders and Gradients: Revolutionizing Web Design in 2025 In 2025, CSS 3D borders and gradients are leading in revolutionizing web design. These advanced techniques allow developers to craft visually stunning, dynamic, and interactive user interfaces that captivate users and enhance the browsing experience. By blending modern CSS properties with creative approaches, designers can now cre...

vijay1983

December 30, 2024

CSS glassy slightly folded borders 3D effect 2025