- Easy
- Convenient
- Fast
-
Effective
- Choose Format
- Set Image Size
- Crop Image
- Add Border
- Add Gloss
- Anti-Aliasing
- Round Corners
- Drop Shadow
- Perspect Image
- Add Reflection
Easy,
Convenient,
Fast, and
Effective.
your free one-stop shop for web 2.0 graphics
Enhancing photos is easy. No more Photoshop.
just add notcss.com and your choice of effects:
to the beginning of the URL, and your new image is ready to go!
learn about all the effects, or try them out interactively!
b=5,
r=10*,
i=30,
g
to the beginning of the URL, and your new image is ready to go!
learn about all the effects, or try them out interactively!
No uploading, no downloading. How convenient.
Specify effect values in pixel or percentage units.
values are read as pixels by default. (sh=10 is a 10px shadow)
for percentage, append an asterisk. (
r=50* is a 50% radius)
http://notcss.com/sh=10,r=50*,d=100/flower.png
Use relative indexing
if your old HTML code was:
<img src="flower.png">
your new code becomes:
<img src="http://notcss.com/sh=10,r=50*,d=100/flower.png">
note that you need not specify the full image path (http://www.my_url.com/path/flower.png)
Generate web 2.0 backgrounds from scratch
http://notcss.com/w=300,h=50,b=2,c=fff,r=8,fg=030,gr=ff8/
Response times are fast. All effects are cached.
To save time, NotCSS remembers every call you make,
immediately returning the output image on subsequent calls.
notcss.com (this very site) is a showcase of our technology; all of the graphics on this site are generated on the fly using calls to NotCSS itself.
However, if the fact that we use our own technology is not reassuring enough, just add effects to your image using our interface, and from there, save directly to disk.
notcss.com (this very site) is a showcase of our technology; all of the graphics on this site are generated on the fly using calls to NotCSS itself.
However, if the fact that we use our own technology is not reassuring enough, just add effects to your image using our interface, and from there, save directly to disk.
NotCSS is effective. Combine from many effects.
Regular Effects:
Choose Format
Resize Image
Crop Image
Add Border
Add Gloss
Anti-Aliased Effects:
Background Color
Round Corners
Drop Shadow
Perspect Image
Add Reflection
Is there a particular effect that you need but is not listed?
Suggest it!
Choose the output format.
jpg = JPEG compression (out of 100)
gif
png
Specify the output format (and compression when applicable).
If not specified, the default output format is the same as the input image format.
Specify a new image size.
w = width, h = height
– OR —
d = both width and height
If only one of
w and h is specified, the image will be scaled (maintaining aspect ratio).
If both dimensions are specified – resulting in a different aspect ratio – the image will
be cropped to fit. Please consult the API for more information on the cropping method.
size percent values are relative to the respective dimension of the original image.
Crop the image.
x = crop amount (on all sides)
xl = crop left
xr = crop right
xt = crop top
xb = crop bottom
crop percent values are relative to original image size.
Add a border.
b = border thickness, c = border color
The color parameter is the hexadecimal RGB value of that color. (default: black)
i.e. white = ffffff (or just fff for short)
b percent values are relative to the smallest dimension of the output image.
Add a glossy effect.
g = glare strength (out of 100), gc = gloss color
The gloss color parameter is the hexadecimal RGB value of that color. (default: white)
i.e. mellow yellow = ffff88 (or just ff8 for short)
Specify a background color for anti-aliasing.
No Anti-Aliasing
bumpy and grindy
bumpy and grindy
Yes Anti-Aliasing
super smooth
super smooth
bg = background color
Several effects require that a background color be specified in order for anti-aliasing
to work properly. This is only necessary when the output format is a JPEG or a GIF.
The background color parameter is the hexadecimal RGB value of that color. To specify a transparent
background (in the case of a PNG or GIF output format), add a minus sign in front of the RGB value.
i.e. transparent black = -000000 (or just -000 for short). (default: transparent white)
Round the corners.
r = corner radius
This effect is antialiased, and may require setting the background color.
r percent values are relative to the smallest dimension of the output image.
Drop a shadow.
sh = shadow offset
This effect is antialiased, and may require setting the background color.
sh percent values are relative to the smallest dimension of the output image.
Add perspective to your image.
p = perspect angle
This effect is antialiased, and may require setting the background color.
Add a reflection.
i = reflection height
This effect is antialiased, and may require setting the background color.
i percent values are relative to the height of the output image.
Generate backgrounds.
w = width, h = height
to scale the image so that the width is exactly 100 pixels, use w=100
to set the width to 25 percent of it's initial value and the height to 200 pixels, use w=25*,h=200
to scale the image so that the width is exactly 100 pixels, use w=100
to set the width to 25 percent of it's initial value and the height to 200 pixels, use w=25*,h=200