nowfound

Dev tools · December 6, 2018

Shapy

Shapes & Images with CSS Gradients

Shapy launched on December 6, 2018 with 132 votes, #167 of 2,148 launches that month and more than 75% of that year's launches. The site was still online in September 2026, 7 years on.

Visit shapy.app ↗Shapy alternativestop 8% of December 2018

What it does

Shapy is a CSS gradient generator that lets you create shapes and images by layering and moving around gradients on a single div tag. Shapy is inspired by the Daily CSS Images challenge, Razvan Caliman's talk about https://www.youtube.com/watch?v=oGobLmA_WVQ, as well as Lynn Fisher's https://a.singlediv.com project.

A gradient generator for layering and adding multiple gradients. Create shapes and CSS images using gradients only.

Shapy is a gradient shape editor that helps you discover and explore the power of CSS gradients. If you don't know how to use css, you can describe what you want to see using Cabina.AI AI Chat and then use Shapy to achieve the final result Gradients are CSS elements of the image data type that show a transition between two or more colors. These transitions are shown as either linear or radial. Because they are of the image data type, gradients can be used anywhere an image might be. The most popular use for gradients would be in a background element. To put it more relevantly, gradients are part of an extremely popular design trend that has been gaining popularity over the last several…from shapy.app

Does a similar job

all alternatives →
  • Mesh·y - Generate Mesh Gradients2022 · meshgradient.in · ▲435

    Generate custom beautiful mesh gradients

  • Blend2015 · colinkeany.com · ▲263

    Generate simple and beautiful CSS3 gradients

  • CSS generator for a high-def glass effect2025 · glass3d.dev · ▲420

    There are lots of glassmorphism generators out there, but I wanted to push the effect further! This project is the result of months of experimenting with CSS property layering and battling browser quirks. Cross-browser compatibility is actually the reason I rely on ::before and ::after pseudo-elements to build up the effect. Move the color/opacity to the main element, and you’ll get weird color bleed on the corners in Chrome. Move the texture, and it muddles the bevel’s specular highlight. Move the bevel, and it gets blurred out by the backdrop-filter. And so on! Layers include: *…

  • CSS Gradient2018 · cssgradient.io · ▲410

    A simple, colorful gradient generator

  • CSS Color Gradient Generator2020 · mybrandnewlogo.com · ▲208

    A novel and easy way to design beautiful color gradients.

  • CSS Gradient Generator2024 · cssgradientgenerator.com · ▲237

    Generate and make beautiful colors

More dev tools this month

the category →
  • /dev/null▲482

    a social network for devs

    Dev tools · 2d ago · dev-null.sh

  • open-source IDE for thoughtful software design. Contribute to devdotfast/whiteboard development by creating an account on GitHub.

    Dev tools · 27d ago · github.com

  • Contribute to reladraw/reladraw development by creating an account on GitHub.

    Dev tools · 25d ago · github.com

  • OpenBot▲362

    Grok Bot alternative: free, local, open-source, multiplayer

    Dev tools · 22d ago · openbot.run

  • Talanoa▲343

    Hi HN, I’m a fullstack developer, and honestly, I’ve lost count of how many side projects I’ve worked on over the years. But one idea kept coming back to me: a different kind of email client. It first came to me in 2014: “What if we could handle emails more like conversations?” Every year, I’d revisit this concept in my “Build Notes.” Ten years later, no one had built exactly what I had in mind — so I finally decided to do it myself. That’s how Talanoa was born. I wanted something focused on people, not timelines. I was tired of marking messages as unread just to remember to reply later, or…

    Dev tools · 20d ago · talanoa.email

  • CoreSpeed▲332

    One MCP for everything your agents need: apps, memory, tools

    Dev tools · 28d ago · corespeed.io

Source: Product Hunt launch ↗

Launched alongside, December 2018

the whole month →
  • remove.bg▲2,028

    Remove image backgrounds automatically in 5 seconds with just one click. Don't spend hours manually picking pixels. Upload your photo now & see the magic.

    Work · 2018 · remove.bg

  • Humaaans▲1,592

    Mix-&-match illustrations of humans with a design library.

    Growth · 2018 · humaaans.com

  • Make your ideas look awesome, without relying on a designer

    Life & fun · 2018 · refactoringui.com

  • Everything you ever wanted to know about YC companies

    Growth · 2018 · ycdb.co

  • Free illustrations for better UX

    Growth · 2018 · icons8.com

  • Know where you can travel with your passport tension free ✈️

    Life & fun · 2018 · visalist.io