question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Is there a way to achieve an inset shadow?

See original GitHub issue

I’ve tried a myriad of combinations using shadowOffset without success. For context this would be used on a TextInput but any reasonable number of wrappers would be acceptable.

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Comments:9 (4 by maintainers)

github_iconTop GitHub Comments

12reactions
jeanregissercommented, Aug 7, 2015

There’s also another trick: using a shadow, border and transparent background and hidding the overflow.

image

https://rnplay.org/apps/OgRtiw

4reactions
ashourcommented, May 3, 2018

Just FYI, I hacked inset shadows using react-native-linear-gradient.

screen shot 2018-05-03 at 11 39 19 am

👆🏽was achieved with:

<LinearGradient
        style={styles.container}
        locations={[0, 0.15, 0.15]}
        colors={['rgba(200, 200, 218, 0.25)', 'rgba(200, 200, 218, 0.005)', '#eafcff']}
>
        <TextInput
            {/* ... */}
        />
</LinearGradient>

// ....

const styles = StyleSheet.create({
    container: {
        //...
        backgroundColor: '#eafcff',
    },

//...
Read more comments on GitHub >

github_iconTop Results From Across the Web

CSS Box Shadow - CSS-Tricks
Myk: Just place a DIV in front of the image you want the inset shadow on, absolutely position it with z-index, and you'll...
Read more >
How to set the inset shadow using CSS ? - GeeksforGeeks
Approach: To give the inset shadow to an element, we will use the box-shadow property. In the box-shadow property, we will define the...
Read more >
How to create an inner shadow using CSS - Educative.io
An inner shadow can be created using the box-shadow property, which allows different types of shadows to be added to an element.
Read more >
box-shadow - CSS: Cascading Style Sheets - MDN Web Docs
The box-shadow property enables you to cast a drop shadow from the frame of almost any element. If a border-radius is specified on...
Read more >
How to make an inner shadow effect with CSS? | Codementor
Although it seems Neumorphism comes with a couple of obvious downsides, its shadow effect is really appealing to me. Hence, I'm going to...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found