Gradient Shapes

HTML-CSS
1

I just learned how to make a heart using CSS. Instead of giving my heart one plain color, I was attempting to give my heart shape a gradient. However, when I changed my color from pink to #CCFFFF, #FFCCCC it turned my shape into a a diamond. Why did it do this? Can anyone help me turn it back into a heart with the gradient I want to use?

I also changed the height and width from 50 to 200. This doesn’t seem to have any effect on the shape.

Thanks in advance. :face_with_raised_eyebrow:

https://codepen.io/LayDBug/pen/aagGde

.heart {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #CCFFFF, #FFCCCC;
height: 200px;
width: 200px;
transform: rotate(-45deg);
}
.heart::after {
background-color: #CCFFFF, #FFCCCC;
content: “”;
border-radius: 50%;
position: absolute;
width: 200px;
height: 200px;
top: 0px;
left: 25px;
}
.heart::before {
content: “”;
background-color: #CCFFFF, #FFCCCC;
border-radius: 50%;
position: absolute;
width: 200px;
height: 200px;
top: -25px;
left: 0px;
}

div {
background: linear-gradient(#CCFFFF, #FFCCCC)
}

2

Hi,

  1. before and after pseudo elements are invisible because you aren’t using the right style syntax for a gradient on those two. Compare those to the gradient you applied to the div. you will see the difference.

  2. They are also not in the right position. When you increased the size you forgot to increase the left: style on after and the top: style on before so the circles are inside the div, not aligned with the edges to make the bumps on the heart.

Temporarily change the background color red on those and you will see what I mean.

I’m not sure about blending the gradients from before, after and div harmoniously but I think that could be done. I’ve never looked at it much but there are ways to control how and where the blending occurs. You could probably tweak that so it looked like one shape instead of three shapes overlayed.

1 Like
3

Hi,

Thank you, I’m still working with it.