DEV Community: İsmail Aydın

How to Add a Watermark to an Image for Free

İsmail Aydın — Tue, 30 Jun 2026 04:19:55 +0000

You spent time on a photo, a product shot, or a design, and now you want to share it without it being quietly lifted and reposted as someone else's. A watermark is the simplest deterrent: your name, handle, or logo laid over the image so the credit travels with it. This guide explains how to add one for free in your browser, where nothing about your picture is uploaded to a server.

What a watermark is actually for

A watermark does not make an image impossible to copy, but it changes the math for anyone tempted to. Its real jobs are:

Attribution. Your name or handle stays attached, so reposts still point back to you.
Deterrence. A visible mark makes an image far less appealing to grab and reuse.
Branding. A consistent logo across your images builds recognition over time.

The goal is a mark that is clearly present but does not ruin the picture, which usually means semi-transparent and tucked into a corner.

How to add a watermark in your browser

The free Image Watermark tool does this without any software to install, and it works the same on a phone or desktop.

Open the tool and drop your image in, or click to browse for it.
Add your watermark text, or your logo, and position it where you want.
Adjust the size and opacity so it is readable but not overpowering.
Download the watermarked image. Your original stays exactly as it was.

The whole process runs inside the page on your own device, so the image is never sent anywhere.

Getting the look right

A few habits separate a clean watermark from a distracting one:

Keep it subtle. A semi-transparent mark protects the image without dominating it. Solid, opaque text usually looks heavy.
Pick a quiet corner. Bottom-right is the convention for a reason: it credits without covering the subject.
Stay consistent. Use the same text, font feel, and placement across your images so they read as a set.
Size it to the image. A mark that looks right on a large photo can disappear on a small one, so check it at the final dimensions.

Watermark last, in the right order

Watermarking usually comes at the end of a short editing chain. Resize the image to its final dimensions first with the Image Resizer, because adding the mark before resizing can distort it. Then, after watermarking, shrink the file for the web or email with the Image Compressor. If a platform needs a specific file type, the Image Format Converter switches it in one step.

Why doing it in the browser matters here

This one is especially worth stressing. The images people most want to watermark, original photography, client work, product shots, are exactly the images you least want sitting on someone else's server. Many online watermark tools upload your picture, process it remotely, and send it back, which leaves an unmarked copy of your valuable image on their system.

A browser-based tool removes that risk. The work happens in your own tab using your own device, so the unprotected original is never uploaded. Nothing to leak, nothing to retain, nothing to trust a stranger with.

Putting it together

To watermark an image properly: size it first, add a subtle text or logo mark in a quiet corner, keep it consistent across your work, and export the result. Do it with a tool that runs in your browser so your originals stay private. That is precisely what the Image Watermark tool delivers, free and instant.

How to Create a CSS Gradient (and Copy Clean Code)

İsmail Aydın — Tue, 30 Jun 2026 03:57:11 +0000

A flat color is fine, but a well-judged gradient is what makes a hero section, a button, or a card feel finished. The trouble is that hand-writing gradient syntax from memory is fiddly, and one wrong value gives you a hard line instead of a smooth blend. This guide explains how CSS gradients actually work and how to build one visually, then copy clean code you can paste straight into your stylesheet.

The two gradients you will use most

CSS has a few gradient types, but two cover almost everything:

Linear gradient blends colors along a straight line. You set the angle (or a keyword like to right) and the colors flow across it. This is your go-to for backgrounds, buttons, and banners.
Radial gradient blends outward from a center point in a circle or ellipse. It is perfect for spotlights, glows, and soft focal backgrounds.

Both are built from color stops: a list of colors and, optionally, where each one sits along the line.

How to build a gradient in your browser

The free CSS Gradient Generator lets you design one by eye and hands you the code, so you never guess at syntax.

Open the tool and pick your gradient type, linear or radial.
Choose your colors and drag the stops until the blend looks right.
Adjust the angle or position to taste.
Copy the generated CSS and paste it into your stylesheet.

What you see in the live preview is exactly what ships, so there is no trial and error in the browser dev tools afterward.

Reading the code it gives you

A simple linear gradient looks like this:

background: linear-gradient(90deg, #2b59ff, #7c3aed);

That reads as: blend from blue to purple, left to right (90 degrees). Add a third color or move the stops and you control exactly where each transition happens. A radial version swaps the keyword:

background: radial-gradient(circle, #2b59ff, #1a1a2e);

Because the output is plain CSS, it works in every modern browser with no library and no build step.

Tips for gradients that look professional

Keep the hues related. Blends between neighboring colors (blue to purple, orange to pink) look smooth. Wildly opposite colors can turn muddy in the middle.
Mind the angle. A subtle diagonal (around 135 degrees) often feels more natural than a flat top-to-bottom fill.
Use it with intent. A gradient on a button plus a matching one on the background ties a design together. If you need a matching shadow, the Box Shadow Generator builds one the same way.

Need the colors in another format?

Gradients are written in hex by default, but you may need the same colors as RGB or HSL for a design system or a framework. The Color Converter translates between formats instantly, so you can drop the values wherever your project expects them. Pair a gradient with rounded corners from the Border Radius Generator and you have the full look of a modern card in a couple of minutes.

Why a browser tool beats memorizing syntax

Gradient code is easy to get slightly wrong, and a small mistake produces a banded, ugly result. Building it visually means you adjust until it looks right and then copy code that is guaranteed to match the preview. Everything runs in the page on your own device, so there is no account, no upload, and nothing to install.

To create a CSS gradient the painless way: pick the type, set your colors and stops, fine-tune the angle, and copy the code. It should be free and instant, which is exactly what the CSS Gradient Generator is for.

How to Convert HEIC to JPG Without Uploading Your Photos

İsmail Aydın — Tue, 30 Jun 2026 03:55:15 +0000

You email a photo from your iPhone, and the person on the other end replies that they can't open it. You drag a picture into an old app or an upload form, and it refuses the file. The culprit is almost always the same three letters: HEIC. This guide explains what HEIC is, why it keeps tripping things up, and how to convert it to a universal JPG free in your browser, without sending the photo anywhere.

What is HEIC, and why does it cause trouble?

HEIC is the format Apple uses by default for photos on recent iPhones and iPads. It is genuinely clever: it stores the same image at roughly half the file size of a JPG, so your photo library takes up less space.

The catch is compatibility. HEIC is newer and not universally supported, so you run into walls like these:

Windows often shows a blank thumbnail or asks you to install an extension.
Older apps and editors simply reject the file.
Websites and upload forms frequently accept JPG and PNG but not HEIC.
The person you sent it to may have none of the software needed to open it.

JPG, by contrast, opens everywhere on the planet. Converting solves the problem in one step.

How to convert HEIC to JPG in your browser

The free HEIC to JPG converter does this in seconds, and it works the same on a phone or a laptop.

Open the tool and drop your HEIC file in, or click to browse for it.
Let it convert the photo to JPG.
Download the JPG. Your original HEIC file stays untouched.

The conversion runs inside the page on your own device, so the photo is never uploaded to a server.

Will I lose quality when I convert?

In practice, no, not in any way you will notice. The conversion decodes the HEIC and re-saves the same picture as a high quality JPG. The visible detail is preserved; the main thing that changes is that the JPG is a bit larger on disk, which is the normal tradeoff for a format that opens everywhere.

If file size matters, for example you are attaching the photo to an email or uploading it to a form with a limit, run the result through the Image Compressor afterward. And if the photo is also physically too large, the Image Resizer brings the dimensions down before you send it.

Stop the problem at the source on your iPhone

If you would rather your iPhone simply take JPG photos from now on, you can change one setting:

Open Settings and tap Camera.
Tap Formats.
Choose Most Compatible instead of High Efficiency.

New photos will save as JPG. Note that this does not convert the HEIC photos already in your library, so for those you will still want a quick converter.

Why doing it in the browser keeps your photos private

Many HEIC converters online work by uploading your photo to their server, converting it there, and sending it back. For a generic image that is no big deal. For personal photos, family pictures, documents, or anything you would not hand to a stranger, it means a copy now lives on someone else's computer under their rules.

A browser-based converter avoids that completely. The work happens in the same tab you have open, using your own device, so the file never leaves your hands. Close the page and nothing remains on a server, because nothing was ever sent to one.

Putting it together

Converting an iPhone photo for the wider world is usually a short chain. Turn the HEIC into a universal JPG with HEIC to JPG, shrink it with the Image Compressor if it needs to fit an email or form, and switch it to another type entirely with the Image Format Converter if a site specifically wants PNG.

To convert HEIC to JPG the easy way: use a tool that runs in your browser, drop the file in, and download the JPG. It should be free, private, and instant, which is exactly what the HEIC to JPG converter is built to be.