Jak uzyskać taki typ cienia w css

0

Hej filepond (https://pqina.nl/filepond/) dodaje taki ciekawy zielony cien do zdjecia
screenshot-20231218001347.png.
Mozecie to sprawdzic na podanej stronie przy "Multiple File Upload". Z tego co sprawdzilem to tam jest jakis canvas ktory to robi. Nie mialem z tym tagiem jeszcze stycznosci i zastanawiam sie jak uzyskac podobny efekt?

0

A to nie jest liniowy gradient od zielonego do przezroczystości?

Ewentualnie jest coś takiego jak "inset box shadow".

0

no wlasnie wydaje mi sie ze nie dlatego sie zastanawiam jak osiagnac podobny efekt, probowalem sie bawic z box shadowem i inset na true i tak nie bardzo to wygladalo. Tam na tej glownej stronie mozesz sprawdzic sam jak to robia, ja tam widze canvasy

1

Na pewno można to zrobić za pomocą gradientu liniowego, ewentualnie jeszcze z dodatkiem opacity. Jak dobrze pokombinujesz, to dojdziesz do identycznego efektu.

background-image: linear-gradient(green, transparent);
opacity: 0.2;
0

Spróbuj przy pomocy mask i gradientu góra dół.

0

Tak na szybko poskładane, zwykły gradient:
https://jsbin.com/dopofoquve/1/edit?html,css,output

canvasa używają zapewne dlatego, że gradienty z css mają dość brzydkie efekty przejścia kolorów nieraz, ale idea jest taka sama

zdaje się że tam są też dwa gradienty pod kątem, a u mnie jest jeden płaski, więc nie ma tego efektu większego zakrycia rogów

możliwe, że tam jeszcze jakaś maska css jest używana, bo na czarnym obrazku pod spodem kiepsko to wygląda, ale to też może być kwestia kolorów czy innego opacity w gradiencie, kwestia dostosowania

ogółem prosty efekt

1 użytkowników online, w tym zalogowanych: 0, gości: 1