Create an inner shadow effect with a transparency of 75% and a blur radius of 5 pixels to match the look from the PSD

I recently came across a PSD file with an element sporting an inner shadow effect.

The inner shadow in question features a blend mode of "multiply", black color, 75% opacity, and a size of 5px.

In my research, I discovered that I can replicate this inner shadow using the following code:

-moz-box-shadow:    inset 0 0 5px #000000;
-webkit-box-shadow: inset 0 0 5px #000000;
box-shadow:         inset 0 0 5px #000000;

However, this method does not incorporate the 75% opacity specified. Is there a way to adjust the opacity level as well?

htmlcss

Answer №1

To give your box-shadow a sense of transparency, you should utilize the rgba property. To achieve this effect in your scenario, follow these steps:

-moz-box-shadow:    inset 0 0 5px rgba(0,0,0,0.75);
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.75);
box-shadow:         inset 0 0 5px rgba(0,0,0,0.75);

The last value represents the opacity, while the first three represent the color (in this instance, Black).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Moving elements using CSS

Hi, I've been facing this issue with my web development since the start. Whenever I zoom in, the container also moves along. Is there any way to fix this problem? .darkslidecont{ width: 200px; height: 50px; position: relative; bac ...

htmlcss

Is it possible for me to load a window following a click

I developed a customized Modal Box that functions similar to the browser's "alert()". When using the traditional alert(), it halts the rendering and executions of the underlying webpage. I am seeking methods to achieve this same behavior: preventing ...

javascriptjqueryhtmldom

Angular.js animation for element movement

I'm currently struggling to create a simple move animation. I am aiming for a similar effect to the one shown in this example (taken from another SO question). So far, I have managed to achieve this using the .animation() method. This is essentiall ...

javascriptangularjscssanimationng-animate

Tips for adjusting the positioning of a div element in a responsive design

I am currently working on my website and facing a layout issue. In desktop mode, there is a sidebar, but in mobile view, the sidebar goes down under the content displayed on the left side. I would like the sidebar to appear at the top in mobile view, fol ...

javascriptjqueryhtmlcss

Troubleshooting: Issues with locating CSS and JS files (404 error) while utilizing URL parameters within Django platform

I've designed a dashboard page that showcases various graphs. The page automatically updates the graph data every hour. You can access the page at the following URL: http://localhost/dashboard I'd like to give users the option to specify the ...

javascriptpythonhtmldjango

Double array summation function

It is necessary for me to calculate the total coursePrice from this JSON data source here using AngularJS (javascript). I need to calculate two sums: one for each school and another for all schools combined. I have already displayed all the data in a tabl ...

javascripthtmlangularjs

Memory Match: Picture Edition

In this memory game, letters are used. I had considered changing it to a picture-based game, but I faced difficulty in generating images and incorporating them into the array. <script> var memory_array = ['A', 'A', 'B&ap ...

javascripthtmlcss

How can I ensure that the eye icon is displayed when the accordion is expanded?

Greetings to all users of stackoverflow. I am having an issue with my accordion. I want the hidden eye icon next to each open accordion to become visible, but only for the clicked accordion. Can someone please assist me with this? :) Here is my code : ...

javascripthtmlbootstrap-4

Triggering scroll snapping in CSS based on a different user action than just scrolling

Take a look at this example: https://codesandbox.io/s/spring-wood-0bikbb?file=/src/styles.css Try this to recreate the issue: Click on the input at the top Scroll to the bottom, then click on an empty area Observe how the screen jumps back up to the top ...

css

Switching Atom's Markdown preview theme

I'm exploring ways to customize the theme of the Markdown preview in Atom through cascading stylesheet (CSS) files. Currently, I have the markdown-preview-plus package installed. ...

cssmarkdownatom-editor

Is there a way to remove a checkbox node that has already been generated?

I've been working on creating a to-do list, and I've run into an issue with deleting the checkbox once the task is complete. I attempted to create a function within the main function containing an if/else statement, but it didn't seem to wo ...

javascripthtmldom

Issues with Navbar Toggle Button Functionality in Bootstrap Version 4.1.3

I am utilizing BootstrapCDN v4.1.3 and I am aiming to have my navbar fixed at the top of the user's browser consistently. However, when I apply the position: fixed; property to the nav div, the links become unclickable in desktop mode and the mobile t ...

javascriptjqueryhtmlcssbootstrap-4

Creating a static CSS lightbox with scrolling content

I am trying to create a CSS lightbox for an image gallery, where the images displayed in the lightbox need to be large so their content is easily readable. The lightbox container is fixed in its position, but I require the images to be scrollable along the ...

htmlcss

Trouble with Pre-populating Form Select Elements in React - Auto-populate Feature Failing to Work

With my working React ReduxForm component, I'm struggling to pre-populate a Select input in the form while still allowing it to be changeable. Despite searching through documentation and forum posts, I haven't found a solution yet. It seems like ...

javascripthtmlreactjshtml-selectredux-form

Find and choose the main div instead of the sub div in Robot Framework

I'm new to Robot Framework and working on test automation. I need to select the parent div, but the child div is always being clicked instead. Here's my current RF code: Wait and click element xpath: //div[contains(@class,'parent&a ...

htmlseleniumxpathcss-selectorsrobotframework

Display the chosen rows from an HTML table

I currently have a table set up like the one shown in this example. I am now looking to add a feature that allows users to print only selected rows. These rows should be selectable by clicking on checkboxes located on the right side of each row. If anyone ...

javascripthtmlprinting

Troubleshooting Error in Python Selenium: Unable to Locate Element Using Link Text

I need to target the specific element "seltarget" from a list of options. HTML: <div class="filter-item" data-reactid=".3.1.0.0.1.0.0.3.0.0.0.3">seltarget</div> When exporting to a Python file, it suggests locating the element by xpath: dri ...

pythonhtmlseleniumselenium-webdriver

Transferring JavaScript variables to a frame

Struggling to integrate dynamic parameters from the URL into a frame, but nothing seems to be working. I've tried placing them inside and outside the tags, before and after... Anyone have any insights on this? The URL in the top frame is . The initia ...

javascripthtmlframeset

The float property is not functioning properly in CSS right now

I am a novice when it comes to CSS and I am attempting to position my information icon on the right side of my webpage. Below is the HTML and CSS code that I currently have: .content > .chat-section > .chat-window > .chat-top-bar { ...

htmlcss

I'm having difficulty integrating boostrap with my react application due to issues with the css-loader

In my React index.js file, I am importing Bootstrap and using Webpack 4: import React from 'react'; import ReactDOM from 'react-dom'; import './assets/css/index.css'; import App from './App'; import * as serviceWork ...

cssreactjswebpackbootstrap-4webpack-4