Ways to create a curved shadow behind a circular object with CSS3

Is it possible to achieve a specific shadow effect like the one in this image using CSS3 without any images? I have tried various methods to create this type of shadow in CSS, but I haven't been successful. I understand that box-shadow creates shadows on boxes, but is there something similar to round-shadow? If it's possible, how can it be done?

Please note that I am familiar with box-shadow and border-radius, so I'm looking for a different kind of shadow effect. Any insights or suggestions from the community would be greatly appreciated.

htmlcss

Answer №1

If you're looking for a starting point, consider using the before and after pseudo elements. Check out this example on http://jsfiddle.net/FHLJM/

div {
    background-color: #f00;
    border-radius: 50%;
    height: 250px;
    width: 250px;
    margin: 30px auto;
    position: relative;
    z-index: 1;
}
div:before {
    content: '';
    height: 150px;
    width: 250px;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000), to(#fff));;
    position: absolute;
    top: 100px;
    right: 50px;
    -webkit-transform: rotate(45deg);
    z-index: -1;
}
div:after {
    content: '';
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background: #f00;
    position: absolute;
    z-index: 1;
}

This may not be a perfect solution, but it can help achieve what you're aiming for to some extent.

Answer №3

Here is the CSS code that will achieve the effect you are looking for:

.circle { background: red; border-radius: 50%; width: 50px; height:50px;position:relative;}
.circle:before {
    /* Background gradient styles */
    width:100%;
    height:75%;
    display: block;
    content: " ";
    position: relative;
    top: 22px;
    right: 15px;
    z-index: -1;
    /* Rotation transforms */
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform:rotate(45deg);
}

You can view the live example in this Fiddle link.

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

When HTTP 304 meets the Cache-Control directive with a value of no-cache

I'm encountering the following response from certain web server requests: First request: HTTP/1.1 200 OK Date: Mon, 16 Jan 2012 05:46:49 GMT X-Powered-By: Servlet/2.5 JSP/2.1 Content-Type: text/plain Content-Length: 78 Content-Encoding: gzip Etag: " ...

htmlhttphttp-headers

What is the process for transforming conditional classes from clxs to cva format?

Looking for a way to convert the code snippet below into cva format... {items.map((item, index) => { const isActive = item.key === SOMETHING; return ( <div key={index} className={clsx( ...

cssreactjsnext.jstailwind-css

Customizing the arrow of a Bootstrap tooltip and adjusting its positioning

I've implemented a bootstrap tooltip to show an image in it. So far, I've been successful in achieving this. https://i.sstatic.net/hgzyL.png However, my current requirement is as follows: https://i.sstatic.net/xcxWZ.png I would like to adjust ...

javascripthtmlcssbootstrap-4

`Is there a way to move a value between webpages by utilizing local storage?`

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title>TechSavvy</title> </head> <body> <form action="apply.html" method="post"> <div class="consultantinformation" ...

javascripthtmlforms

Is the initial carousel element failing to set height to 100% upon loading?

If you take a look here, upon loading the page you will notice a DIV at the top. It is labeled "content" with "content_container" wrapped around it and finally, "page" around that. Clicking the bottom left or right arrows reveals other DIVs with similar ta ...

javascripthtmlcssheightalignment

Increase the amount of `<tr>` identifier

I currently have a table that consists of only one row and multiple columns. In this table, there is an "Add Item" button that duplicates the existing row when clicked. Each row contains a select drop-down menu with various item SKUs. When a SKU is selecte ...

javascriptphphtmlmysqlajax

Update the less mixin

I attempted to eliminate the border radius from all Bootstrap elements by creating a custom-mixins.less file with the following lines in it. My intention was for these lines to overwrite the original .border-radius mixin, but unfortunately, it did not work ...

csslessmixins

Distinguishing desktop from iPad in a landscape setting using media queries

As I work on developing a website with responsive design, I am facing the challenge of differentiating the layout between tablets in landscape mode and desktops using media queries. The current media queries I have are: <link href="base.css" rel="style ...

cssmedia-queries

Struggling to keep my footer anchored to the bottom of the page

Having some trouble while learning CSS & HTML - my footer won't stick to the bottom, it seems to float above with space below it (like a margin is present even though it's not). I've tried various online tips but most either don't w ...

htmlcss

Grid Dimensions and Placement

I have been attempting to fix the alignment of each column in my fixed header table and gridview control without success. Inspecting the elements revealed that the header ID width is set correctly at 50px, but the boundfield EmpID width is incorrect at 6 ...

htmlcssasp.netgridview

Achieve a form submission redirection using ajax

I am looking to customize the form response process by sending it to a Google sheet and then redirecting the user to a customized thank you page instead of the default report page. Form: <form method="post" id="formID" action="gscript"> ... </fo ...

htmlajax

Updates made to the Transform property in Mui Theme are not appearing in the browser

I'm looking to modify the MuiInputLabel.outlined. While I can see various changes when inspecting in the browser, I'm having trouble seeing the transform property change specifically. This is the current configuration of my MuiInputLabel: MuiInp ...

cssreactjsmaterial-ui

Disable the button on a form submission using jQuery before sending the form information to PHP with the specified button name

I have a form that utilizes PHP for processing. I want to prevent the user from submitting the form more than once. I attempted to use jQuery to disable the form upon submission, but it disables the button without actually submitting the form to PHP. My g ...

javascriptjqueryhtmlforms

Is there a recommended method for incorporating the lang attribute when including phonetic pronunciations in text?

Several languages have established transliterations into Latin characters, such as Hindi, Russian, or Japanese. For instance, the Hindi phrase 'The man is eating' in Devanagari script is written as 'आदमी खा रहा है।&ap ...

htmllocalization

Retrieve a value by using the getBoundingClientRect method

While experimenting with code from W3Schools, I attempted to modify it in order to assign the resulting LEFT value to another element (DIV). Here is an example of getBoundingClientRect Despite correctly retrieving the left value of 8, nothing seems to be ...

javascriptcssgetboundingclientrect

How can you search for text within a column that contains HTML tags using jQuery datatables in a table?

On my webpage, there is a search box that allows users to filter data in a specific column. The text in the cell is formatted using HTML tags like <i> and <b>. I am facing a challenge when trying to filter text with <i> or <b> tags ...

javascriptjqueryhtmldatatable

Differences between HTML server control and ASP.NET web controlsHTML server

When attempting to trigger a javascript function upon clicking a server control button, I encountered an issue. Using an html button control with the runat="server" attribute allowed me to successfully call the function. However, when employing an ASP.net ...

javascripthtmlasp.net

will not eliminate spaces within a string

I am receiving input from a textarea form and formatting it into a single line. The input looks like this: Country: France City: Paris Street: Champ Next, I place it in the long line: $line = $_POST['input']; Now, I need to replace spaces a ...

phphtml

Issue with ngFor displaying only the second item in the array

There are supposed to be two editable input fields for each section, with corresponding data. However, only the second JSON from the sample is being displayed in both sections. The JSON in the TypeScript file appears as follows: this.sample = [ { "se ...

javascripthtmlangulartypescriptangular8

The overflow-x property is failing to hide content in Safari

My website functions perfectly on all browsers except Safari. When using Safari, I'm able to scroll horizontally for an excessive amount of pixels. Has anyone experienced this issue before? ...

htmlcsssafarioverflow