Recipe
Result
Loading...
Live EditorOpen in playground
<Box css={{ backgroundImage: 'linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)), url("https://images.unsplash.com/photo-1563379926898-05f4575a45d8?ixlib=rb-4.0.3&auto=format&fit=crop&w=1470&q=80")', width: 300, height: 300, backgroundSize: 'cover', borderRadius: '$xl', position: 'relative' }} > <Box css={{ position: 'absolute', bottom: 0, left: 0, padding: '$8', }} > <Heading size="h3" css={{ marginBottom: 0, color: '$white900' }} > Seafood Pasta </Heading> <Text css={{ color: '$white800', marginBottom: '$2' }} > Recipe by John Doe </Text> <Flex gap='$4'> <Chip color="warning"> #Seafood </Chip> <Chip color="warning"> #Pasta </Chip> </Flex> </Box> </Box>