using css, how to create a white circle within a transparent div?


Tags: html,css,gradients

Problem :

I wish to create a white circle with fuzzy edges contained within a transparent div by using css gradients.

With the z-index higher than the body and absolute positioning I should be able to move this over any part of the page and "white-out" everything beneath the circle.

I have tried my favorite gradient generators, but they haven't worked.



Solution :

Try using http://www.colorzilla.com/gradient-editor/.

Here's one I made using their tool: (Set the orientation to radial)

http://www.colorzilla.com/gradient-editor/#ffffff+24,ffffff+59&1+31,0+34;Custom

To make the edges more fuzzy, drag the second opacity stop further from the white - and vice versa.


    CSS Howto..

    How to draw diagonal lines with css [duplicate]

    How to display random parts of a page on refresh?

    How to apply css on one html file only

    LESS - confusion about how mixins take parameters

    How to put the div at the center with css?

    How to overlap divs using CSS?

    how to hidden image over image in css

    How can I get a label to right align in a table “cell” (td)?

    CSS how to align elements inside a div with 2 columns

    Unsure of how to wrangle my javascript dependencies

    How to refactor CSS based on HTML class

    How set font-size in TinyMce

    How to make background image on hover have a transition effect without default background image?

    How to refer to a CSS style using ASP.NET MVC?

    How to import css dynamically with js?

    How to change the display property in a css class using js when user clicks a button

    dynamic drop down how to show success using css (tic icon)

    How to block CSS and js file loading in Google Blogger template?

    JavaScript: How to clear my custom keyboard mappings and use the default ones

    How to get the ultimate, final calculated style value on an HTML element?

    How to change text-selection styles with javascript [duplicate]

    How do you hide an HTML element based on a series of parent elements

    how to create a half bordered circle(only css, not js or even svg)?

    How to set ID or css selector for new row added in table using javascript

    How to add class CSS after ng-click to parent element?

    how do i avoid this title from overflowing?

    How to center something I appended with js and also replace it

    Visual studio 2013 crash when editing a css file. How do I troubleshoot?

    How to reset input element style

    How to fade in and out a CSS “:after” pseudo element when adding or removing a class