Turn your image into a heart 관련

CSS > Article(s)

---

Article(s)

---

Turn your image into a heart

Create a CSS heart shape using any image

Turn your favorite image into a Heart 💖 using a few lines of code

• No extra element (only the <img> tag)
• No pseudo-element
• Only two CSS declarations

An image with a heart shape

img {
  mask-border: radial-gradient(#000 69%,#0000 70%) 84.5%/50%;
  clip-path: polygon(-41% 0,50% 91%, 141% 0);
}

For better support we can rely on mask

img {
  mask:
   radial-gradient(at 70% 31%,#000 29%,#0000 30%),
   radial-gradient(at 30% 31%,#000 29%,#0000 30%),
   linear-gradient(#000 0 0) bottom/100% 50% no-repeat;
  clip-path: polygon(-41% 0,50% 91%, 141% 0);
}

See CSS only heart images by t_afif on CodePen.

Related Article

CSS Shapes: The Heart

Create a heart shape using modern CSS tricks. You can even transform images into hearts

More CSS Tips

• Navigation menu with sliding items A simple navigation menu with a cool sliding effect for the items. July 22, 2022
• Dashed lines using CSS gradient Ceate dashed lines using one gradient and CSS variables. July 13, 2022
• Float an element to the bottom corner Use shape-outside to place an element on the bottom corner. June 22, 2022
• Extend your underline to the edge of the screen II Use a border-image trick to create an overflowing underline. June 20, 2022

Turn your image into a heart

---

Create a CSS heart shape using any image