Achieve a polished and radiant illumination using Cascading Style Sheets

Looking to achieve a cool light effect using just CSS and HTML, similar to this image
https://i.sstatic.net/TEwYF.png

Not sure if it can be done or how to go about it.

Any assistance would be greatly appreciated.

.circle {
  border: 10px solid;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  background-color: green;
}
<div class="circle"></div>

htmlcsscss-shapes

Answer №1

My example is outlined below:

*,
*:before,
*:after {
  box-sizing: border-box;
}
div {
  width: 120px;
  height: 120px;
  border-radius: 60px;
  background: linear-gradient(to bottom, #393939 0%, #151515 100%);
  position: relative;
}
div:before {
  content: '';
  width: 106px;
  height: 106px;
  border-radius: 53px;
  background: #19f000;
  border: 1px solid black;
  position: absolute;
  left: 7px;
  top: 7px;
}
div:after {
  content: '';
  width: 80px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
  position: absolute;
  transform: rotate(-18deg);
  left: 13px;
  top: 9px;
}
<div></div>

JSfiddle Demo

Answer №2

To enhance the 3D effect, consider utilizing a secondary div element for highlighting purposes. This approach allows you to reserve the box-shadow property for creating darker edges and contours.

.circle {
  width: 164px;
  height: 164px;
  background-color: #19f000;
  border-radius: 100%;
  position: relative;
  border: 10px solid #444444;
  box-shadow: 0 0 15px 0 rgba(0,0,0,.8) inset;
  transform: rotate(-20deg);
}

.highlight {
  position: absolute;
  top: 2px;
  right: 0;
  left: 0;
  margin: auto;
  width: 80%;
  height: 64%;
  opacity: .92;
  border-radius: 100%;
  
  /* gratuitous gradient compatibility - activate! */
  background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}
<div class="circle">
<div class="highlight"></div>
</div>

Answer №3

To achieve a glossy effect, you can combine a radial gradient and a pseudo element.

  1. Start by creating a radial gradient from white to green, where the transition occurs at 5%.
  2. Apply the glossy effect using the opacity property on the pseudo element. Match the shape of the parent element with a white background and reduced width.

View the JSfiddle Demo here.

.circle::after {
  background: white none repeat scroll 0 0;
  border-radius: 50%;
  content: " ";
  display: block;
  height: 100px;
  opacity: 0.15;
  position: absolute;
  width: 150px;
  left: 20px;
}
.circle {
  background-image: radial-gradient(ellipse at 50px 10px , #ffffff 0%, #fff 5%, #00ff00 100%);
  border: 10px solid;
  border-radius: 50%;
  height: 200px;
  position: relative;
  width: 200px;
}
<div class="circle">

</div>

Answer №4

To achieve this effect with a single element, you can overlay a radial-gradient image on top of an angled linear-gradient image, positioning them correctly. Using multiple background images and layering is well-supported by browsers (IE9+), but keep in mind that gradients are only supported in IE10+.

.circle {
  border: 10px solid;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  background: radial-gradient(ellipse at 90px 45px, rgba(255, 255, 255, 0.75) 10%, rgba(255,255,255,0.5) 30%, rgba(255,255,255,0) 32%, rgba(25,240,0,1) 45%), linear-gradient(160deg, transparent 12%, rgb(25, 240, 0) 30%);
  background-size: 125% 80%, 100% 100%;
  background-repeat: no-repeat;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="circle"></div>

Browser Compatibility Charts:

Answer №5

<!doctype html>
<html>
<head>
<style>
.circle {
    border:10px solid;
    border-radius: 50%;
    width: 200px;
    height: 200px; 
    background: rgb(25,240,0); /* Gradient color */
    background: -moz-linear-gradient(top,  rgba(25,240,0,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(25,240,0,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(25,240,0,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(25,240,0,1) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(25,240,0,1) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
    background: linear-gradient(to top,  rgba(25,240,0,1) 0%,rgba(255,255,255,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#19f000', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

}
</style>
<head>
<body>
<div class="circle">

</div>
</body>
</html>

Please utilize the specified background gradient color in your design. I trust this will be of assistance to you

For a live demo, click here Demo

Answer №6

Experiment with box shadow using this example: Updated Demo

Make adjustments to the shadow settings and background gradient colors to suit your preferences.

 .circle {
    border:10px solid;
    border-radius: 50%;
    width: 200px;
    height: 200px;
    background: #f8ffe8;
    background: url(data:image/svg+xml;
    base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y4ZmZlOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE3JSIgc3RvcC1jb2xvcj0iIzU2YmM2YyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxOTliMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #f8ffe8 0%, #56bc6c 17%, #199b00 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f8ffe8), color-stop(17%, #56bc6c), color-stop(100%, #199b00));
    background: -webkit-linear-gradient(top, #f8ffe8 0%, #56bc6c 17%, #199b00 100%);
    background: -o-linear-gradient(top, #f8ffe8 0%, #56bc6c 17%, #199b00 100%);
    background: -ms-linear-gradient(top, #f8ffe8 0%, #56bc6c 17%, #199b00 100%);
    background: linear-gradient(to bottom, #f8ffe8 0%, #56bc6c 17%, #199b00 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8ffe8', endColorstr='#199b00', GradientType=0);
    -webkit-box-shadow: inset -1px 60px 68px -28px rgba(255, 255, 255, 1);
    -moz-box-shadow: inset -1px 60px 68px -28px rgba(255, 255, 255, 1);
    box-shadow: inset -1px 60px 68px -28px rgba(255, 255, 255, 1);
}

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

Visibility of text compromised when placing transparent button inside input field

After adding a clear button inside the input box in Angular, I am facing an issue where the text in the input box is being overlapped and not fully visible. Below you will find detailed information on this problem. HTML Code <ng-template pTemplate=&quo ...

htmlcssangularstylesp-table

Using a video as a background in HTML

My code has an issue where I have set overflow: hidden in the CSS but the video is still not displaying below the text as intended. The relevant CSS snippets are: fullscreen-bg { top: 0; right: 0; bottom: 0; left: 0; overflow:hidden ...

htmlcss

Tips for adjusting image and div sizes dynamically according to the window size

In my quest, the end goal is to craft a simplistic gallery that closely resembles this particular example: EXAMPLE: This sample gallery is created using Flash technology, but I aim to develop mine utilizing HTML, CSS & Javascript to ensure compatibil ...

javascriptjqueryhtmlcss

The link generated through ERB using link_to cannot be clicked on

When using the ERB link_to helper method to generate a hypertext link to an individual article, I am encountering an issue where the link appears as clickable in the view but is not actually clickable (the cursor does not change to a pointer). I have atte ...

htmlcssruby-on-railsruby

Is there a way to ensure that the JSON data and the image appear on the same row with some spacing between them?

Trying to display JSON data with images and text side by side but facing issues where the text wraps below the image instead. How can I fix this layout to show text next to the image? Flex-wrap property doesn't seem to work as expected. function for ...

htmlcss

Creating image links in this jQuery Slider plugin: A beginner's guide

Currently, I am attempting to insert links into each photo within the slider. While I have successfully done this on two other websites, I am encountering difficulties due to variations in the code structure. <a href="http://www.google.com I have expe ...

jquerycsshyperlinksliderimage

Font size determined by both the width and height of the viewport

I'll be brief and direct, so hear me out: When using VW, the font-size changes based on the viewport width. With VH, the font-size adjusts according to the viewport height. Now, I have a question: Is there a way to scale my font-size based on ...

javascripthtmlcsssass

What methods are available to test my website across different browsers such as outdated versions of Internet Explorer like IE8?

Currently, I am working on Chrome with Windows 7 OS installed. However, Windows 7 does not support Internet Explorer 8. This is causing issues when trying to view my web pages in the IE8 version and older. How can I resolve this problem? I have attempted ...

javascripthtmlcssuser-interface

Setting the line-height property in CSS to a value greater than the font-size property

Dealing with a frustrating issue where I want to align the top of an image with text, but the letters end up slightly below the line height. Check out this simple example featuring a classic movie: HTML: <img src="http://cf2.imgobject.com/t/p/w92/wcI ...

htmlstylescsstext-size

Personalizing the form controls in Bootstrap for selection options

Utilizing Bootstrap's form-control class helps maintain a consistent style for both form input and select option elements. However, when using form-control on select elements, it results in an unsightly drop-down button appearance in Firefox.https://i ...

cssbootstrap-4html-inputform-control

Switch between different classes with JavaScript

Here is the code that I am working with: This is the HTML code: <div class="normal"> <p>This is Paragraph 1</p> <p>This is Paragraph 2</p> <p>This is Paragraph 3</p> <p>This is Paragraph 4&l ...

javascripthtmlcss

The functionality of the anchor tag is restricted in both Chrome and Safari browsers

I'm having an issue with HTML anchor tags not working properly in Chrome and Safari. Instead of scrolling up, the page scrolls down when clicked. Here is the HTML code I'm using: <a id="to-top"></a> <a class="button toTop" href="# ...

javascriptjqueryhtmlcssgoogle-chrome

Removing all table rows except one in Jquery

I currently have this code in my view: <script> $(document).ready(function() { $("#add_instruction").click(function(){ $("#instructions").append("<tr><td></td><td><input type='text' name='rec ...

javascriptjqueryhtml

Deactivate the button for each package based on a specific PHP value

Are you looking to purchase a package or multiple packages? The available packages are displayed in the table below. I would like to implement a feature where once a user buys a package, the corresponding button for that package is disabled. Here is my cu ...

javascriptphphtmlbootstrap-4

The problem arises from misinterpreting MIME types when serving SVG files, causing the resource to be seen as an image but transferred with

Having some issues targeting SVG images with CSS to use as backgrounds on certain elements. When I try to access the image directly here, it works perfectly fine. However, when using it in CSS, I encounter the following error: Resource interpreted as Imag ...

cssapache.htaccesssvgmime-types

JavaScript: Conditional statement used to determine the target of a touched element

I'm currently working on enhancing the mobile responsiveness of a React project. As part of this process, I am attempting to ensure that certain JavaScript-driven style changes are only applied to elements that are not the target or a child of: <d ...

javascripthtmlreactjsdomevents

`Troubleshooting: Inability to chain selectors for custom styling in Next JS module`

When I chain selectors in a CSS file, the styles don't seem to apply as expected. I'm importing the styles into the component and it only applies for the main class. For example: import styles from './Home.module.css' const Home = () = ...

cssnext.js

Overlaying text on several images

My challenge is centering text over multiple images using a combination of Bootstrap and CSS. While most online resources suggest using position: absolute; to achieve this, I have only been successful in centering the text in the middle of the screen rathe ...

htmlcssbootstrap-4

Missing ng-required fields not displaying the has-error validation in AngularJS forms

While editing any part of their address, the user should see a red invalid border around each field to indicate that the full form is required. However, for some reason I can't seem to get the 'Address' field to display this border. The set ...

javascriptcssangularjshtmltwitter-bootstrap

Instructions for creating a scrollable unordered list when it reaches its maximum capacity

My HTML code has a <ul> element with the following structure: <ul id="messages"> </ul> In my HTML file, I have not specified any <li> items. However, in my JavaScript code using jQuery, I dynamically add <li> items to the & ...

javascriptjquerycss