Material ui glassomorphism cards

Om
Apr 2, 2021

--

To get the of material-ui let’s try to make 10 different types of cards

  1. Basic Card
import React from "react";
import { makeStyles } from "@material-ui/core/";
import { Card, CardContent, Typography } from "@material-ui/core/";
const useStyles = makeStyles({
root: {
minWidth: 275,
backgroundColor: "rgba(255,255,255,0.4)",
backgroundImage:
"linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%)",
backdropFilter: "blur(40)px",
boxShadow: "10px 10px 10px rgba(30,30,30,.1)",
borderRadius: 10
}
});
export default function BasicCard() {
const classes = useStyles();
return (
<Card className={classes.root}>
<CardContent>
<Typography color="textSecondary" gutterBottom>
Word of the Day
</Typography>
<Typography variant="h2" component="h2" gutterBottom>
Hello
</Typography>
<Typography variant="subtitle1" component="p">
React components for faster and easier web development. Build your own
design system, or start with Material Design.
</Typography>
</CardContent>
</Card>
);
}

--

--