css Question posted in
Some basic documentation can be found here.

Css – How to make visible border gradient with border radius in mui table head?

i am trying to make a linear gradient background with border radius with visible border. I tried multiple methods and i am stuck from yesterday.
i put here my example code
https://codesandbox.io/p/sandbox/unruffled-dawn-yrzg69?file=%2Fsrc%2FDemo.js%3A311%2C1
background works fine but i am not able to see prominent border solid how to achieve this?
i also tried this method
Border Gradient with Border Radius
This works fine but inline block not letting take it full width if i remove it then i don’t see border radius.
i am trying to achieve all of this on mui table head.
i want to take it full width with border radius, prominent border and linear gradient background.
above i gave code sandbox link. Thanks in advance.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    This approach worked for me.

    export const GradientTableHead = styled(TableHead)(() => ({
  position: "relative",
  zIndex: 0,
  backgroundClip: "padding-box",
  borderRadius: "10px",
  "&:after": {
    border: "1px solid transparent",
    position: "absolute",
    top: 1,
    left: 1,
    right: 1,
    bottom: -5,
    background:
      "linear-gradient(#323473 0 0) padding-box,linear-gradient(to right, #5c5fa4, #5c5fa4) border-box",
    content: '""',
    zIndex: -1,
    borderRadius: "10px",
  },
}));
 <Table>
            <GradientTableHead>
              <TableRow>
                <TableHeadCell>cell name</TableHeadCell>
                <TableHeadCell>
               
                      Cell name here
                   
                </TableHeadCell>
          </TableRow>
            </GradientTableHead>
</Table>

  2. 0

    You can’t, border images are not compatible with border radius. Border images for gradients are not recommended as they cause visual artifacts, there are better ways of doing this.

    Instead, hide a div with a gradient background behind your table with a width 4 pixels larger and a height 4 pixels larger than your table. Offset the left and top by two pixels, and apply a radius to that div that matches your table radius.

    Like this as an example for what I am using in my code:

    .space-btn-help {
    z-index: 100;
    width:50px;
    height:50px;
    background-color: #4687cc;
    border-radius: 3px;
    position: relative;
    box-shadow: 0px 0px 4px 0px #0000003d;
    text-shadow: 0px 4px 4px #00000040;
}

   .shadow-before-help {
    opacity: 100%;
    width: 54px;
    height: 54px;
    position: absolute;
    background-image: linear-gradient(45deg, #c35185, #416898);
    margin-left: -2px;
    margin-top: -2px;
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    filter: blur(2px);
    z-index: 0;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search